Почему у внешнего контейнера высота меньше, чем у внутреннего?

Question

[Drovosek01]

Подскажите, почему высота блока 3px, хотя внутри него блоки высотой 18px? Как сделать так, чтобы он был высотой не меньше того, что внутри него?
height нигде в стилях не задается и непонятно как он вычисляет именно 3px

Answer 1

[Yupiter7575]

Судя потому что вы дали, мы должно к гадалке сходить чтобы узнать что там у вас в css. Предположу что у этого блока position absolute

Comments

[Drovosek01]

Нет, position там не задано

[tyoma_koder]

Drovosek01, возможно у родительского блока display: inline

[Drovosek01]

tyoma_koder, нет, там и у родительского и у дочернего блока display: flex

Answer 2

[ThunderCat]

Учимся работать с консолью.

Comments

[Drovosek01]

Где на вашем скриншоте консоль и как она поможет?

[ThunderCat]

Drovosek01, Консоль - все инструменты разработчика, не только консоль скриптов и ошибок. В частности в элементах смотрим стили, откуда и как они наследуются, какие стили применены, а не тупо размер из подсветки блока разглядывать.

[Drovosek01]

ThunderCat, то, что вы описали - это Dev Tools, а не консоль. Согласно вашему определению тогда можно и VSCode и Web Storm назвать консолью :D

Если по делу, то естественно все эти наследуемые стили я просмотрел и во вкладке Computed тоже нет информации откуда взялась высота в 3px

[ThunderCat]

Drovosek01, По вашему скрину не видно где вы смотрите и какие свойства у этого элемента, то есть вы показываете какую-то ненужную фигню, нифига не помогающую в понимании проблемы. Смотрите парент элементы от вашего флекс контейнера, возможно там задано что-то в размерах, а флекс соответственно занимает доступную высоту.

По поводу инструментов разработчика - консоль она и есть консоль, Dev Tools ее редко называют, короче и привычнее для олдов - консоль, по аналогии со многими сворачивающимися настроечными панелями. Да, там есть вкладка консоль, которая именно для команд и отладки, но сути это не меняет.