"min-height" percentage only applies if the element has an indirect parent of "display: flex"

Question

Can't understand why the #inner element only has its height when #main gets the display:flex rule.

This is my code:

#main {
  display: flex
}

#wrapper {
  background-color: violet
}

.content {
  font-size: 2em
}

#inner {
  min-height: 50%;
  background-color: green
}

<div id="main">
  <div id="wrapper">
    <div class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
    <div class="content">It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>
    <div class="content">It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>
    <div id="inner"></div>
  </div>
</div>

If I remove display: flex the rule #inner has a height equal to 0:

#main {
/*   display: flex */
}

#wrapper {
  background-color: violet
}

.content {
  font-size: 2em
}

#inner {
  min-height: 50%;
  background-color: green
}

<div id="main">
  <div id="wrapper">
    <div class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
    <div class="content">It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>
    <div class="content">It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>
    <div id="inner"></div>
  </div>
</div>

And one more thing. When #inner has some content inside, its height will be accumulated to the #main height.

Look at the screenshot

Answer 1

You are facing the result of stretch alignment related to flexbox. By default, flex items are stretched, so the following applies:

So min-height with percentage is working. Doesn't work if I change alignment and keep display:flex

#main {
  display: flex
}

#wrapper {
  background-color: violet;
  align-self:flex-start;
}

.content {
  font-size: 2em
}

#inner {
  min-height: 50%;
  background-color: green
}

  

    
Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
    
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.