我不明白为什么我的高度为 auto 的 div 占据了其父级的全高

Question

I have a div.grid that contains multiple div.column inside using flexbox. When a div.column increases in height due to having more content inside, all other div.column also increase in height.

It is to my understaind that this shouldn't help as their height is set to auto.

Also, my grid is using the flex display, with flex-wrap: wrap . I think is what is causing it, but I haven't found any explanation to why it is changing the children's height.

I have tried changing the following properties, in different combinations and manners, of parent and children: position, display, height.

These are the computed styles only, not my actual code.

 div.grid { display: flex; flex-wrap: wrap; width: 960px; } div.column { display: block; flex-basis: 37.5%; flex-grow: 0; flex-shrink: 0; /* height is actually set to auto, but it is computed like this */ height: 132px; }

 <div class="grid"> <div class="column">something</div> <div class="column">something<br>else<br>here</div> <div class="column">something</div> </div>

I expected the children to not fill the full height of the parent when the children don't all have the same amount of content.

Answer 1

As LGSon has asnwered in the comments:

Using flex: display automatically defaults align-items to stretch making the height of the children stretch to fill the height of the wrapper. It is also not shown in the computed properties, which is why it didn't cross my mind to check it.

Therefore, the solution was to add align-items: flex-start to .grid .