Почему гибкий контейнер ведет себя так

Question

, когда display: flex flex-container не видит нижнее поле h1s или верхнее поле h1 после flex-контейнера,

но display:inline-flex см.

я хочу понять, почему флекс-контейнер так себя ведет

h1 {
	color: #555;
}

.flex-container {
	margin:40px auto;
	padding: 10px;
	background-color: #ddd;
	border-radius: 5px;
	list-style: none;
	box-sizing: border-box;
}
.flex-item {
	color: white;
	background-color: firebrick;
	border-radius: 5px;
	padding: 10px;
	margin: 10px;
	font-weight: bold;
	font-size: 2rem;
	box-sizing: border-box;
}


.flex-container {
	display: flex; /* flex | inline-flex */
	// display: inline-flex;
}

<h1>Flexbox</h1>
<ul class="flex-container">
    <li class="flex-item item-1">1</li>
    <li class="flex-item item-2">2</li>
    <li class="flex-item item-3">3</li>
    <li class="flex-item item-4">4</li>
    <li class="flex-item item-5">5</li>
    <li class="flex-item item-6">6</li>
    <li class="flex-item item-7">7</li>
    <li class="flex-item item-8">8</li>
</ul>
<h1>Bottom header</h1>

Answer 1

Это поведение по умолчанию.

• block элементы уровня вертикальные поля сворачиваются.
• inline элементы уровня вертикальные поля не разрушаются.

Согласно спецификации :

рядный-флекс

Контейнер Flex устанавливает новый контекст форматирования Flex для содержание. Это то же самое, что установление контекста форматирования блока, за исключением того, что гибкий макет используется вместо блочного макета. Например, поплавки не вторгаются в гибкий контейнер, а гибкий поля контейнера не сжимаются с полями его содержимого. Контейнеры Flex образуют вмещающий блок для своего содержимого как блок-контейнеры. [CSS21] Свойство переполнения применяется к гибкие контейнеры.

Answer 2

Так работает inline-block / flex.

Посмотрите на это jsfiddle

Вы ожидаете, что 2 элемента div находятся в одном ряду, но вместо этого именно свойство display: block первого элемента div является причиной такого поведения.

Вам нужно добавить display: inline-block в #one div, чтобы получить ожидаемое поведение.