父容器 div 在包含宽泛的 div 子项时不调整宽度 [重复]答案

【问题标题】：Parent container div does not adjust width when it contains an wide overflown div child [duplicate]父容器 div 在包含宽泛的 div 子项时不调整宽度 [重复]
【发布时间】：2019-09-13 18:36:29
【问题描述】：

查看以下（非常简单的）页面标记：

<div style="border: 3px dotted lightpink;">
  <div style="border: 3px dotted lightblue;">
    Normal div
  </div>
  <div style="width: 2500px; height: 200px; border: 3px dotted lightgray;">
    Overflow div
    <br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet justo donec enim diam vulputate ut. Et odio pellentesque diam volutpat commodo sed egestas egestas fringilla. Gravida neque convallis a cras semper auctor. Scelerisque fermentum dui faucibus in ornare quam. Odio euismod lacinia at quis. Est sit amet facilisis magna. Sit amet nulla facilisi morbi tempus. Id velit ut tortor pretium viverra suspendisse potenti nullam. Consequat nisl vel pretium lectus quam id. Magna fermentum iaculis eu non diam phasellus vestibulum lorem sed. Sed odio morbi quis commodo odio aenean.
  </div>
</div>

为什么最外面的容器（粉红色边框）没有水平增长以包围最里面的溢出容器（灰色边框）。它确实垂直增长以适应，我希望它也应该水平增长。

【问题讨论】：

因为它是块元素，所以默认情况下 100% 的 parent 宽度（与内容无关）.. 使用 inline-block
块元素的行为就是这样。您可能必须深入研究规范才能找到实际记录下来的地方，但网络演变为主要沿 Y 轴延伸的媒介。制作外部 div display:inline-block，如果所有内容都应该不那么宽，如果您需要它扩展到整个宽度，可以添加一个 min-width: 100%。
添加overflow:auto到父div

标签： html css

【解决方案1】：

只需在粉色容器中使用 display: inline-block：

<div style="border: 3px dotted lightpink;display:inline-block">
<div style="border: 3px dotted lightblue;">
    Normal div
</div>
<div style="width: 2500px; height: 200px; border: 3px dotted lightgray;">
    Overflow div
    <br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet justo donec enim diam vulputate ut. Et odio pellentesque diam volutpat commodo sed egestas egestas fringilla. Gravida neque convallis a cras semper auctor. Scelerisque fermentum dui faucibus in ornare quam. Odio euismod lacinia at quis. Est sit amet facilisis magna. Sit amet nulla facilisi morbi tempus. Id velit ut tortor pretium viverra suspendisse potenti nullam. Consequat nisl vel pretium lectus quam id. Magna fermentum iaculis eu non diam phasellus vestibulum lorem sed. Sed odio morbi quis commodo odio aenean.
</div>
</div>

【讨论】：

感谢您的回答 Stefano Pascazi...我更感兴趣的是为什么而不是如何解决它... Temani Afif 和 misorude 提供了有关上述问题的 cmets 原因的见解