A piece of metaphysical CSS code, who will explain it?

re-describe that when a normal div wraps two div child elements of a fixed width, when the browser window shrinks, the child element "rushes out" of the parent element. When the parent element div is added with the attribute of inline-block, the child element and the parent element are adaptive, that is, the child element does not rush out of the parent element, while the parent element adapts according to the size of the browser window.

what I want to ask is the nature of this phenomenon. And the influence of inline-block here?

<div class="outter">
  <div>1</div>
  <div>2</div>
</div>

.outter {
  background: red;
  padding: 5px;
  display: inline-block;
}

.outter div {
  width: 800px;
  margin: 5px;
  background: gray;
}

this happens when the browser width is less than div,

it"s normal after the parent element is added with inline-block. Ask why, what role does inline-block play here

Css css3 front-end

Mar.20,2021

an excerpt from "CSS World" Douban Reading Chapter 3, Section 3.2.1, to explain.

3.2.1 hidden width:auto
as we all know, the default value for width is auto. Because auto is the default value, the appearance rate is not high, but
is, it is a hidden guy, it contains at least the following four different width representations.
(1) make full use of available space. For example, the width of
,
elements defaults to 100% of the parent container.
this behavior of making full use of available space also has a proper name, which is called fill-available,.
(2) shrink and package. The typical representative is floating, absolute positioning, inline-block element or table element.
is called shrink-to-fit, literally translated as "shrink to fit", which is a little interesting, but not vivid enough. I have always called this present
image "wrapping". The fit-content in CSS3 refers to this width representation.
(3) shrink to a minimum. This is most likely to appear in the table where table-layout is auto. Experienced
people must have seen such a magnificent event as shown in figure 3-4.
seeing is believing. Interested readers can manually enter http://demo.cssworld.cn/3/2-1..

div defaults to display: block;width:auto; , so (1) make full use of available space. So it changes as the parent container body changes.
while setting div to display:inline-block;width:auto; , it shows (2) shrinking and wrapping. Shrink to the appropriate width:800px;

with the width of the child container.

there is nothing magical:

Block-level elements, such as div, whose default width is the parent's width, and its overflow: visible, so you can see that the child element is larger than the parent element
After display: inline-block , it changes to row-level external and block-level internal, so the width of child elements is taken as the default width

to put it bluntly, in the early years, HTML and CSS did not have the concept of layout, and all layouts were fumbled out by developers on the basis of understanding the rendering mechanism.

display:inline-block:
inlineblocklinkainline-blockblockinline
marginpadding

Previous: Why is the interface requested automatically after the vue page is entered?

Next: What's the difference between Spring MVC and Spring Boot?