嵌套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应用于该行。请参阅代码段：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;