div的溢出区域没有样式[重复]答案

【问题标题】：Overflow area of div has no style [duplicate]div的溢出区域没有样式[重复]
【发布时间】：2018-09-08 08:48:45
【问题描述】：

我正在尝试创建一个可水平滚动的表格结构。为此，我有一个包装 div，它具有 overflow-x: auto、每行一个 div 和每个单元格一个 div。

我想对行应用一种样式，但该样式只应用于那些可见的元素。

.inner {
  flex: 1 0 10em;
  height: 2em;
  background-color: green;
}

.outer {
  border-bottom: 10px solid red;
  display: flex; 
}

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

<div class="box">
  <div class="outer">
    <div class="inner">1</div>
    <div class="inner">2</div>
    <div class="inner">3</div>
  </div>
</div>

我希望所有的绿色框都有一个红色的底部边框，但边框只出现在那些没有溢出的项目上。我错过了什么？

【问题讨论】：

.outer width 是问题所在。考虑一下。

标签： html css flexbox

【解决方案1】：

你可以试试这个：

.inner {
  flex: 1 0 10em;
  width:10em; /*Specify a width */
  height: 2em;
  background-color: green;
}

.outer {
  border-bottom: 10px solid red;
  display: inline-flex; /* to take the width of content and not container*/
}

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

<div class="box">
  <div class="outer">
    <div class="inner">1</div>
    <div class="inner">2</div>
    <div class="inner">3</div>
  </div>
</div>

【讨论】：

【解决方案2】：

我不明白你的意思，但我希望这会有所帮助：由于您仅将 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>

CSS：

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

}

希望对你有帮助:)

【讨论】：