Как убрать наследование от display flex?

Question

[lillianfisher]

Почему высота красного div не нулевая?

<div class="menu">
    <div class="links"></div>
    <div class="test"></div>
</div>


<style>
.menu {
    display: flex;
    flex-direction: row;
	
}
.links {
   height: 100vmin;
}
.test{
   width: 10vmin;
   /*почему height !=0, если класс не вложен и наследования нету ?*/
   background: red;
}
</style>

Answer 1

[Danny Arty]

Потому что по умолчанию для свойства align-items выставлено значение stretch
, которое означает что дочерние элементы flex-контейнера заполняют всю его высоту.

Укажите для flex-контейнера свойство align-items с любым другим значением (flex-start, center, flex-end) и будет вам нулевая высота