Почему создание div «display: flex» меняет высоту внутреннего div? ⇐ CSS

[Anonymous]

У меня есть следующий код HTML/CSS, всякий раз, когда я переключаю отображение: flex в .cards-container кажется, что высота div .card уменьшается (когда display: flex отсутствует) и расти (когда присутствует display: flex).
Мне было интересно, в чем причина такого поведения, я думал, что flexbox не работает. не влияет на размер внутренних элементов div.
Когда display: flex присутствует в .cards-container:

Код: Выделить всё

* {
font-family: sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}

.cards-container {
display: flex;
background-color: #e8e8e8;
}

.card {
width: 250px;
height: fit-content;
border-radius: 30px;
background-color: white;
}

.card > .card-bottom-container {
margin: 1rem;
gap: 1rem;
}

.card > .card-bottom-container > .card-tags-container {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}

.card > .card-bottom-container > .card-tags-container > .card-tag {
background-color: red;
border-radius: 10px;
padding: 10px;
}

Код: Выделить всё

Document








[url=/path-1][/url]
[url=/path-2][/url]
[url=/path-3][/url]
[url=/path-4][/url]
[url=/path-5][/url]

Когда display: flex НЕ присутствует в .cards-container (примечание: это единственное, что изменилось, все остальное осталось прежним):

Код: Выделить всё

* {
font-family: sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}

.cards-container {
background-color: #e8e8e8;
}

.card {
width: 250px;
height: fit-content;
border-radius: 30px;
background-color: white;
}

.card > .card-bottom-container {
margin: 1rem;
gap: 1rem;
}

.card > .card-bottom-container > .card-tags-container {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}

.card > .card-bottom-container > .card-tags-container > .card-tag {
background-color: red;
border-radius: 10px;
padding: 10px;
}

Код: Выделить всё

Document








[url=/path-1][/url]
[url=/path-2][/url]
[url=/path-3][/url]
[url=/path-4][/url]
[url=/path-5][/url]

Подробнее здесь: https://stackoverflow.com/questions/788 ... -inner-div