overflow-x children 元素宽度

Question

我有一个 div overflow-x 自动。 div 有 children 比 parent div 宽，导致滚动。

内部 children 被赋予了边框和背景颜色，我想将其延伸到它们的整个宽度 - 包括滚动溢出。内部 children 的实际内容是动态的 - 所以我不能给它们设置宽度。

.outer {
  border: 1px solid black;
  width: 100px;
  overflow-x: auto;
  white-space: nowrap;
}

.inner {
  border-bottom: 1px solid blue;
  background-color: red;
}

<div class="outer">
  <div class="inner">This is is row number 1</div>
  <div class="inner">This is is row number 2</div>
  <div class="inner">This is is row number 3</div>
</div>

问题是它没有——正如在 this fiddle 中所见，背景和边框仅拉伸到 parent 的定义宽度。

如何让 children 的宽度延伸到整个滚动区域？

Answer 1

如果你给 width 大于内部的外部，你就会得到结果。

尝试提供 width: 200px; 或 150%; 让我知道...

.outer {
  border: 1px solid black;
  width: 100px;
  overflow-x: auto;
  white-space: nowrap;
  display:flex;
  flex-wrap:wrap;
  justify-content:strech;
}

.inner {
  border-bottom: 1px solid blue;
  background-color: blue;
}

<div class="outer">
<div class="container-inner">
  <div class="inner">This is is row number 1</div>
  <div class="inner">This is is row number 2</div>
  <div class="inner">This is is rowfddfssdfdfs number 3</div>
  </div>
</div>

这样可以吗？

Answer 2

<div> 元素是一个 block 元素，其宽度将是其父元素的 100%。将其设为 inline 元素将强制 div 的宽度随其文本内容一起拉伸，但遗憾的是，它需要额外的标记才能使其分成行（<br/> 标记）。

我为你的情况设法做到这一点的方法是使内部容器 display: table; 这样元素将表现得像 table 并且它会拉伸其宽度以匹配其内部文本.

.outer {
  border: 1px solid black;
  width: 100px;
  overflow-x: auto;
  white-space: nowrap;
}

.inner {
  display: table;
  border-bottom: 1px solid blue;
  background-color: red;
}

这是一个演示：jsFiddle

Answer 3

html: 引入内包装 div

<div class="outer">
  <div class="innerwrapper">
     <div class="inner">This is is row number 1</div>
    <div class="inner">This is is row number 2</div>
    <div class="inner">This is is row number 3 This is is row number 3 This is is row     number 3</div>
  </div>
</div>

css:

.outer {
  border: 1px solid black;
  width: 100px;
  overflow-x: auto;
  white-space: nowrap;
  display:flex;
  flex-wrap:wrap;
  justify-content:stretch;
}

.innerwrapper {
   /* silence is golden */
}

.inner {
  border-bottom: 1px solid blue;
  background-color: red;
}

链接：https://jsfiddle.net/sL0rkjgm/29/

Answer 4

使用 jquery 很容易。使用 jquery scrollWidth 您将滚动宽度，您可以简单地将其设置为内部 div 的宽度。所以这会给你滚动宽度 $('.outer')[0].scrollWidth) 只需将其设置为内部 div.

的宽度

$(".inner").css('width', $('.outer')[0].scrollWidth);

.outer {
  border: 1px solid black;
  width: 100px;
  overflow-x: auto;
  white-space: nowrap;
}

.inner {
  border-bottom: 1px solid blue;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
  <div class="inner">This is is row number 1</div>
  <div class="inner">This is is row number 2This is is row number 3 </div>
  <div class="inner">This is is row number 3 This is is row number 3 This is is row number 3 </div>
</div>

overflow-x children 元素宽度

overflow-x children element width

css

overflow