如何让子元素在溢出时水平扩展父元素？

Question

我有一个孩子的父容器。当孩子水平溢出（即比浏览器窗口更大）时，它不会影响父母。如果孩子较宽，是否有任何针对父母根据孩子调整宽度的解决方案？

因此，两者都可能比屏幕宽，我对此表示满意。 我没有使用任何UI库（没有引导等）如果孩子比屏幕小，都应该调整宽度浏览器窗口。

<div style="border: 2px solid red"> 
 
    <div style="border: 2px solid blue; width:2000px">test</div> 
 
</div>

Answer 1

您可以设置外层div的显示，以inline-block的：

<div style="border: 2px solid red;display:inline-block"> 
 
    <div style="border: 2px solid blue; width:2000px">test</div> 
 
</div>

如果你需要同时拥有充满整个屏幕时孩子小于屏幕的宽度，那么都需要最小宽度：100％和箱子大小：边界R-盒（你可以删除从父显示-inline-block的）：

div { 
 
    min-width: 100%; 
 
    box-sizing: border-box; 
 
}

<div style="border: 2px solid red;"> 
 
    <div style="border: 2px solid blue; width:300px">test</div> 
 
</div>

Answer 2

您可以设置display: inline-block父和min-width: 100%双方父母和孩子。

类似于this。