Question

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

因此，两者可能比屏幕更宽，我对此感到满意。我没有使用任何UI库（没有bootstrap等）如果child小于screen，两者都应该调整宽度到浏览器窗口。

＆＃13;

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

＆＃13;

Answer 1

您可以将外部div的显示设置为内联块：

＆＃13;

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

＆＃13;

如果你需要在孩子小于屏幕宽度的同时填充屏幕，那么两者都需要min-width：100％和box-sizing：border-box（你可以删除display-inline来自父母的块：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以将display: inline-block设置为父级，将min-width: 100%设置为父级和子级。

类似于this。