html - 当容器元素被内联元素填充时，浏览器如何决定是开始新行还是扩展容器？

Question

假设我有一个容器元素，它的行几乎充满了 inline 或 inline-block 元素并且不能容纳另一个内联元素，而不调整大小。

浏览器应该如何决定它是否可以调整容器的大小、扩展它并将新的 inline 元素放入同一行，或者是否应该断行并放置新的 inline 元素低于现有元素？

如果为容器元素或其父元素设置了 width 或 max-width 属性，这很简单，但是如果两者都没有设置呢？

此外，我对一种特殊情况感兴趣:如果容器元素是 body 或 HTML 的直接后代，那么容器元素何时会溢出 HTML 元素的大小并导致浏览器绘制滚动条:

如果我不采取任何特殊措施，通常不会发生超出浏览器视口(viewport)的溢出；相反，浏览器会插入换行符。我想知道为什么以及如何强制浏览器在添加内联元素时增加我的容器元素的宽度，而不明确指定 width、min-width 等。

Answer 1

请看下面的截图:

DEMO

.container{display: inline-block; width: auto}为您提供灵活的容器宽度以适应所有元素。这里的容器被视为<span>

.container{display: block;width: auto}为您提供全宽容器作为默认行为。

.container{display: block; width: 250px}为您提供密闭容器。任何不适合的内容都会自动换行。

.container{display: block; width: 250px; white-space: nowrap} white-space: nowrap是允许容器不添加\n的css属性到元素。

.container{display: block; width: 250px; overflow-x: auto; white-space: nowrap}最后，overflow-x: auto让您有机会拥有 native 滚动条。通常，overflow: auto在大多数浏览器中应该足够了。

一些注意事项:- 缩放不会影响容器的行为，因为当页面缩放时，容器和元素都会缩放，因此它们会一起缩放，并且不会添加/删除额外的空间。-search container在 stackoverflow 中有固定的 margin 和位置。这不会影响容器内元素的行为方式。他们被告知无论有多少可用空间，都必须留在那里。要解决此问题，可以使用 @media screen css 属性重新安排元素在栈溢出头部的位置。