DIV во flexbox добавляет неизвестное пространство ниже, если внутри нет текста ⇐ CSS

[Anonymous]

I have two identical div structures, left and right. Both has two rows with x number of divs inside each row.

Both has display=flex for parent div (class box) and display=inline-flex for inner div (class rowa).

There is only one difference, left structure doesn't have any content inside div in first row which seems to be adding space below that div even though they all have fixed size. See picture below with arrow point to extra space.





If I add text inside first div on left, space goes away and div works as expected.





here's link to code : https://stackblitz.com/edit/angular-htm ... onent.html

If someone can explain the issue that would be really appreciated.

Thanks


Источник: https://stackoverflow.com/questions/780 ... ext-inside