html - 将所有子元素扩展到带滚动的 div 中的最大可用宽度

Question

父元素具有固定宽度和 overflow:auto 以显示滚动条。父级中有几个子元素具有比其他元素更宽的内容，但我需要扩展所有元素的宽度以填充父级。例如，一个 div 需要扩展，因为它有背景颜色，当用户滚动父 div 时，背景颜色会限制在初始视口(viewport)的宽度。

这里是 jsfiddle 来说明示例。 https://jsfiddle.net/jpsvwdm3/

HTML:

<div class="parent">
  <div class="child">
    child
  </div>
  <div class="long_child">
    long child
  </div>
</div>

CSS:

.parent {
  width: 300px;
  overflow: auto;
  padding: 10px;
  background: #bbb;
}
.child {
  background: lightyellow;
  padding: 5px;
}
.long_child {
  width: 500px;
  background: wheat;
  padding: 5px;
}

Answer 1

如果您不想在这里使用 jQuery，也许有一个解决方案:

http://jsfiddle.net/Lqwqf159/1/ 1

var maxWidth = 0;
$('.parent div').each(function () {
  maxWidth = ($(this).width() > maxWidth) ? $(this).width() : maxWidth;
});
$('.parent div').each(function () {
  $(this).width(maxWidth);
});