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

Question

[2ristBY]

Почему, когда ставишь .scale__row { flex-direction: column;} блок .scale__block имеет высоту 0, и блок .scale__text накладывается на него?

https://codepen.io/2rist/pen/JjbJNdN

Answer 1

[strelok011]

Хм. Прежде чем строить сетку на флексе, стоит удавить всевозможные position: absolute в brand...
position: absolute выключает из потока ваш блок, соответственно у контейнера вокруг такого блока нет информации о размере, то бишь он и становится внутри флекса высотой 0, флекс начинает заполнять вторым контейнером всё доступное пространство.

Рекомендую почитать про поток html, про верстку на флексе, про grow и shrink

Comments

[2ristBY]

Почему тогда, если убрать .scale__row { flex-direction: column;} ничего не ломается?

[strelok011]

потому что в этом случае поведение по умолчанию flex-direction: row, ширина у вас конечная, ширина блоков задана в процентах, потому и случайное совпадение значений дало удобоваримый внешне результат.