html - 未应用溢出的嵌套 flexbox 中的 CSS

Question

我有一个用 flexbox 构建的简单“表格”。

我想使用 overflow-x 滚动它的一部分。

从示例代码可以看出，CSS 样式仅应用于 flex 元素最初可见的部分。在溢出的部分，没有应用 CSS 样式。向右滚动，您会看到背景在溢出开始的地方停止。

.data-table {
  display: flex;
  width: 200px;
}

.data-table__scrollable-data {
  overflow-x: auto;
  background-color: white;
}

.data-table__row-group {
  display: flex;
  background-color: #33ccff;
}

.data-table__data-cell {
  flex: 1 0 100px;
  border-bottom: 1px solid black;
}

<div class="data-table">
        <div class="data-table__scrollable-data">
            <div class="data-table__row-group">
                <div class="data-table__data-cell">Data Cell</div>
                <div class="data-table__data-cell">Data Cell</div>
                <div class="data-table__data-cell">Data Cell</div>
                <div class="data-table__data-cell">Data Cell</div>
                <div class="data-table__data-cell">Data Cell</div>
                <div class="data-table__data-cell">Data Cell</div>
                <div class="data-table__data-cell">Data Cell</div>
                <div class="data-table__data-cell">Data Cell</div>
            </div>
        </div>
    </div>

Answer 1

要使样式应用于溢出区域，您可以将 overflow-x: auto 应用于该行。查看代码片段:

.data-table {
  display: flex;
}

.data-table__row-group {
  display: flex;
  background-color: #33ccff;
  overflow-x: auto;
  width: 200px;
}

.data-table__data-cell {
  flex: 1 0 100px;
  border-bottom: 1px solid black;
}

<div class="data-table">
  <div class="data-table__scrollable-data">
    <div class="data-table__row-group">
      <div class="data-table__data-cell">Data Cell</div>
      <div class="data-table__data-cell">Data Cell</div>
      <div class="data-table__data-cell">Data Cell</div>
      <div class="data-table__data-cell">Data Cell</div>
      <div class="data-table__data-cell">Data Cell</div>
      <div class="data-table__data-cell">Data Cell</div>
      <div class="data-table__data-cell">Data Cell</div>
      <div class="data-table__data-cell">Data Cell</div>
    </div>
  </div>
</div>