When a container element is filled with inline elements, how does the browser decide between starting a new line or extending the container?

Question

Suppose I've got a container element, whose line is almost filled with inline or inline-block elements and can't hold another inline element, without resize.

How is the browser supposed to decide whether it can resize the container, extending it and putting the new inline element into the same line, or whether it should break the line and put the new inline element below the existing elements?

If either width or max-width attributes are set for the container element or its parents, it's pretty straightforward, but what if neither of those are set?

Moreover, I'm interested in one special case: if the container element is a direct descendant of body or HTML, when would container element overflow the HTML element's size and cause the browser to draw scrollbar:

If I don't take any special measures, overflow beyond browser's viewport usually doesn't take place; instead, the browser inserts line breaks. I wonder why and how to force the browser to increase width of my container element upon addition of inline elements, without explicitly specifying width, min-width, etc.

Answer 1

Please have a look on the screenshot below:

DEMO

.container{display: inline-block; width: auto} provides you with the flexible container width to fit in all the elements. The container here is treated as <span>

.container{display: block;width: auto} provides you with full width container as the default behaviour.

.container{display: block; width: 250px} provides you with confined container. Anything that do not fit in will automatically gets line break.

.container{display: block; width: 250px; white-space: nowrap} the white-space: nowrap is the css property that allows the container not to add \n to the elements.

.container{display: block; width: 250px; overflow-x: auto; white-space: nowrap} finally, the overflow-x: auto gives you the opportunity to have a native scrollbar. Usually, overflow: auto should suffice in most browsers.

A couple notes: -Zooming does not affect the behaviour of the container since when the page is zoomed, both container and elements will be zoomed thus they get scaled together and no extra space will be added/removed. -The search container in stackoverflow has fixed margin and position. This will not affect how the elements inside the container should behave. They have been told to stay there no matter how much spaces are available. To fix this, one could use @media screen css property to re-arrange the position of the elements in the header of the stack overflow.