Geek Answers Handbook

Min-height inside flex element is ignored in chrome

I have a flexible container with flex-direction: row and some flexibility elements. Bending elements themselves will have different heights, but due to the default align-items: stretch , they all fill the height of the flexible containers. In my particular use case, this is fine.

The problem is that I have these <div> inside each flex container, and I need them to occupy the entire height of their parent. I thought I could just set min-height: 100% on them. This solution works both in Firefox and Internet Explorer, but not in Google Chrome for some reason.

Here is a code snippet demonstrating the problem. If you look at chrome, you will see that the shorter white .card does not fill the purple .card_container . if you view this in IE or FF, then it will fill the parent height of the container.

 #grid { background: rgba(255,0,0,0.2); padding: 10px; display: -ms-flexbox; display: -webkit-flex; display: flex; } .card_container { width: 300px; background: rgba(0,0,255,0.2); margin: 15px; padding: 5px; } .card { background: white; min-height: 100%; /* <- Why isn't this working? */ } 
 <div id="grid"> <div class="card_container"> <div class="card"> This text is very short. </div> </div> <div class="card_container"> <div class="card"> This text is very long. This text is very long. This text is very long. This text is very long. This text is very long. This text is very long. This text is very long. This text is very long. This text is very long. This text is very long. </div> </div> </div>

One work I found is to make the .card_container flex container and explicitly set the .card to width: 100% .

For example, the snapshot below seems to work in Chrome, FF, and IE:

 #grid { background: rgba(255,0,0,0.2); padding: 10px; display: -ms-flexbox; display: -webkit-flex; display: flex; } .card_container { width: 300px; background: rgba(0,0,255,0.2); margin: 15px; padding: 5px; display: -ms-flexbox; display: -webkit-flex; display: flex; } .card { width: 100%; background: white; } 
 <div id="grid"> <div class="card_container"> <div class="card"> This text is very short. </div> </div> <div class="card_container"> <div class="card"> This text is very long. This text is very long. This text is very long. This text is very long. This text is very long. This text is very long. This text is very long. This text is very long. This text is very long. This text is very long. </div> </div> </div>

I wonder why this work is needed, though. Am I doing something wrong or is it a mistake? Does anyone know where it is documented somewhere?

+6
source share
1 answer

do not use space in flex items. installed in a flexible container

  -webkit-align-items: flex-start;
-3
source

More articles:


All Articles