min-height inside a flex item is being ignored in chrome

Question

I have a flex container with flex-direction: row and some flex items. The flex items, on their own would have various heights, but because of the default align-items: stretch, they all fill the flex containers height. In my specific use case, this is perfect.

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

Here's a code snippet demonstrating the problem. If you view this on chrome, you will see that the shorter white .card is not filling up the purple .card_container. if you view this on IE or FF however, it will fill up the parent container's height.

#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 around I have found is to make .card_container a flex container as well and to explicitly set the .card to width: 100%.

For example, the snippet 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'm wondering why this work around is necessary though. Am I doing something wrong or is this a bug? Does anyone know if it is documented anywhere?

kollein · Answer 1 · 2016-07-10T15:26:25.827

-3

do not use space in flex items. set in flex container

 -webkit-align-items: flex-start;

edited Jul 10 '16 at 15:26

answered Jul 10 '16 at 14:19

kollein

328
3
10

I'm confused as to how this would solve the issue. I tried implementing (my interpretation of) this answer to no avail. Could you put an executable code snippet in your answer that demonstrates the solution? – Luke Jul 10 '16 at 14:24
sorry, i am on mobile cant put, you can try and see result – kollein Jul 10 '16 at 14:30
by http://www.w3schools.com/css/css3_flexbox.asp – kollein Jul 10 '16 at 14:34

min-height inside a flex item is being ignored in chrome

1 Answers1