Html div的溢出区域没有样式

我试图创建一个类似表格的结构，它可以水平滚动。为此，我有一个包装器div，它有overflow-x:auto，每行一个div，每个单元格一个div

我想对行应用样式，但该样式仅应用于可见的元素

.inner{
弹性：1010em；
高度：2米；
背景颜色：绿色；
}
.外部{
边框底部：10px实心红色；
显示器：flex；
}
.盒子{
宽度：20em；
溢出-x：滚动；
}

1.
2.
3.

您可以尝试以下方法：

.inner{
弹性：1010em；
宽度：10em；/*指定宽度*/
高度：2米；
背景颜色：绿色；
}
.外部{
边框底部：10px实心红色；
display:inline flex；/*表示内容的宽度，而不是容器的宽度*/
}
.盒子{
宽度：20em；
溢出-x：滚动；
}

1.
2.
3.

您可以尝试以下方法：

.inner{
弹性：1010em；
宽度：10em；/*指定宽度*/
高度：2米；
背景颜色：绿色；
}
.外部{
边框底部：10px实心红色；
display:inline flex；/*表示内容的宽度，而不是容器的宽度*/
}
.盒子{
宽度：20em；
溢出-x：滚动；
}

1.
2.
3.

我不知道你的确切意思，但我希望这有助于： 因为CSS只用于外部，所以它只用于可见的部分。要实现所有这些的底部红色边框，必须将边框放在内部

HTML:

---

希望它能帮上忙：）

我不知道你的确切意思，但我希望它能帮上忙： 因为CSS只用于外部，所以它只用于可见的部分。要实现所有这些的底部红色边框，必须将边框放在内部

HTML:

---

希望有帮助：）

。外部宽度是个问题。想想看。
。外部宽度是个问题。想想看。
<div class="box">
<div class="outer">
  <div class="inner">1</div>
  <div class="inner">2</div>
  <div class="inner">3</div>
</div>
</div>

.inner {
  flex: 1 0 10em;
  height: 2em;
  background-color: green;
  border-bottom: 10px solid red;
}

.outer {
  width: 20em;
  display: flex; 
}

.box {
  width: 20em;
  overflow-x: scroll;

}