css - 子元素 100% 其父元素宽度溢出 : scroll

Question

我正在寻找一种解决方案，使子元素的宽度达到其父元素的 100%。

问题:父级有overflow-x: scroll。文本将插入一个滚动条。现在我想让 child 获得容器的(新的)宽度。

要求:纯CSS方案；没有进一步的 HTML 标记；没有固定宽度。

width: 100% 只会将其设置为容器的初始状态宽度。

这是一个 fiddle :https://jsfiddle.net/y166e3nb/

Answer 1

我知道它被告知不要使用更多的 HTML 标记，但是选择的答案有一些问题，例如，如果您扩展父级的文本，或者如果您更改 font-size 属性，所选的解决方案将不起作用，因为它正在使用静态 330px 进行计算!

所以我决定发布我认为更好的解决方案:

.parent {
  background: skyblue;
  width: 350px;
  overflow-x: auto;
  padding: 40px 20px;
}

.parent > .content-wrapper {
  display: inline-block;
  white-space: nowrap;
  min-width: 100%;
}

.parent > .content-wrapper > .child {
  background: springgreen;
  white-space: normal;
}

<div class="parent">
  <div class="content-wrapper">
     This is some very very very very very long text to extend .parent div horizontaly, in      order to see .child divs extending
    
    <div class="child">
      This .child div should extend horizontaly
    </div>
  </div>
</div>

我们可以创建另一个涉及文本的 div (上例中的 .content-wrapper)，而不是将文本直接放入 div .parent。

然后我们可以在这个新的 div 中使用'display: inline-block'，让它尊重其内容宽度，而不是父级的宽度!

...换句话说...

通过将 display: inline-block 添加到 .content-wrapper，它将强制此 div 具有其中最大水平内容的宽度，在我们的案例，正文!

现在，如果我们在新的 .content-wrapper 中添加 .child div，.child 将自动填充 .content-wrapper 的整个宽度，即使不使用 'width: 100% '，因为 默认情况下每个 div 元素都有“display: block”，这使得它们具有其父元素的宽度。

我们还应该在 .content-wrapper 中使用“min-width: 100%”，只是防止它的宽度小于 .parent 的宽度，如果文本宽度小于 .parent 的宽度。