Cannot use percent height in child DIV when the parent DIV has a min-height?

user_1175080 0
Viewed 27

Here is the first example. This works fine. Here .b occupies 50% of the height of .a.

.a {
  background: orange;
  height: 200px;
  padding: 10px;
}

.b {
  background: lightblue;
  border: 5px solid blue;
  height: 50%;
}
<div class="a">
  <div class="b">
  </div>
</div>

Here is the second example. It is pretty much the same except that min-height is used to set the height of .a instead of using height.

.a {
  background: orange;
  min-height: 200px;
  padding: 10px;
}

.b {
  background: lightblue;
  border: 5px solid blue;
  height: 50%;
}
<div class="a">
  <div class="b">
  </div>
</div>

But in this second example, the blue box almost vanishes. It is not 50% the height of .a anymore. Why does this issue happen? How to fix it while using min-height for .a?

height css
1 Answers

Incredible I had never seen this case actually, the tricks I would see would be:

.a {
  position: relative;
  background: orange;
  min-height: 200px;
  padding: 10px;
}

.b {
  position: absolute;
  width: calc(100% - 10px);
  border: 5px solid blue;
  top: 0;
  left: 0;
  background: lightblue;
  height: 50%;
}
<div class="a">
  <div class="b">
  </div>
</div>

user_39336340
Related