Why, when laying out a flex block, does the upper indent of the inner block fly off if the display: flex property is removed from the lower block?

Question

css

Actually there is a code.
If the ul element has display: flex;
Then the indents of the neighboring element fly off, can you tell me what is the reason for this?

Answer 1

https://developer.mozilla.org/ru/docs/Web/CSS/CSS_... read.
Elements with display: flex ignore these rules.

Answer 2

because you have a fixed header height. Try never to set the height of the blocks at all. Only in very extreme cases. This is very bad practice.