虽然这听起来像是一个很容易解决的问题,但我还没有找到不使用 Javascript 的方法。
考虑这个例子:https://jsfiddle.net/oopssam8/1/
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
div > div {
width: 200px;
flex-shrink: 0;
height: 200px;
background: red;
}
body > div {
display: flex;
flex-flow: row nowrap;
}
如您所见,红色框扩展到窗口之外。每个盒子都是 200px 宽,所以当检查它们的父级时,我希望看到 2000px 的宽度(有 10 个红色盒子)。父 div 的计算宽度不会超出窗口宽度。
有什么方法可以让父 div 扩展到窗口之外并包裹所有子元素吗?
最佳答案
您可以将容器 div 的宽度值设置为:width: fit-content;
(带有额外的供应商前缀,如下例所示)
这是工作示例:
div > div {
width: 200px;
flex-shrink: 0;
height: 200px;
background: red;
}
body > div {
display: flex;
flex-flow: row nowrap;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
关于html - 使父 div 扩展到窗口之外以包裹所有子项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48097647/