5

When you give min-height to parent and percentage height to the child, the child doesn't get any height.

.p {
  min-height: 50vh;
  background-color:beige;
  
}

.c {
  height: 50%;
  background-color: red;
}
<div class="p">
  <div class="c"> hi </div>
</div>

But if you give explicit height to parent, even if it is smaller than min-height, the child gets a height, but it is relative to min-height and not height provided( when height < min-height)

.p {
  min-height: 50vh;
  height: 1px;
  background-color:beige;
  
}

.c {
  height: 50%;
  background-color: red;
}
<div class="p">
  <div class="c"> hi </div>
</div>
  1. First, I want to understand this behaviour
  2. How can I give the height in percentage to the child with min-height only on the parent
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
ashish singh
  • 6,526
  • 2
  • 15
  • 35
  • height only sees height from the parent to calculate % value. min-height is another rule :( But it works the other way round indeed) – G-Cyrillus May 13 '19 at 14:49
  • @G-Cyr i agree, but why in second case percentage is based on min-height and not height.. which is not happening in first snippet i have attached – ashish singh May 13 '19 at 14:50
  • basically you gave an explicit height so percentage will work and height will respect the min-height .. it's indeed a bit tricky, will try to find the relevant explanation – Temani Afif May 13 '19 at 14:52
  • You are just lucky that it doesn't make it half a pixel high. because min-height value is bigger than height value, height value is overwritten/updated to keep browser behavior coherent and avoid funny bugs – G-Cyrillus May 13 '19 at 14:56
  • Exact question I've asked before :) see https://stackoverflow.com/questions/39309205/height-calculation-by-browsers-containing-blocks-and-children – kukkuz May 13 '19 at 15:03
  • But you have one thing to mind: min-height:50vh + height:1px; is equal to height:50vh. Your container will not grow anymore passed this value. min-height becomes useless and inefficient. – G-Cyrillus May 13 '19 at 15:09
  • @G-Cyr not exactly equal because we can add more *trouble* by applying a max-height with a value lower than 50vh and it will be ignored because min-height has higher priority than max-height but max-height more than height. – Temani Afif May 13 '19 at 15:15

2 Answers2

2

Here is how percentage height works https://developer.mozilla.org/en-US/docs/Web/CSS/height I am using this link because it was much easier to find, as mentioned in the other answer, spec link https://www.w3.org/TR/CSS22/syndata.html#value-def-percentage

The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to auto. A percentage height on the root element is relative to the initial containing block.

You will have to scroll down to find this (Specifications section)

In your case, since you did not specify the height of the parent, your child percentage height computes to auto which is what you saw in your example

here is how you can get percentage height to work without specifying a height of the parent, with position absolute

.p {
  min-height: 50vh;
  background-color:beige;
  position: relative;
}

.c {
  height: 50%;
  background-color: red;
  position: absolute;
}
<div class="p">
  <div class="c"> hi </div>
</div>

Note - the height of your parents = the greater value between min-height and height, which is why your second case works

Honestly, adding a height of 1px as a work around to get the percentage to work for a child without defining a fixed height (since min-height overrides) is a pretty good work around.

Huangism
  • 16,278
  • 7
  • 48
  • 74
  • why in second case percentage is with respect to min height and not height explicitly provided – ashish singh May 13 '19 at 14:58
  • 1
    The height of your parent is the greater value between height and min-height, so since 50vh > 1px, you get your 50% for the child. I added this part to the answer in case these comments gets lost – Huangism May 13 '19 at 14:59
0

In the first case, you do not specify a height for the parent so according to the specs height doc the height of the child will be set to auto instead of the percentage.

If the height of the containing block is not specified explicitly , and this element is not absolutely positioned, the value computes to auto.

In the second case you set a specific height and a min-height. According to another spec regarding min-height

The element's height is set to the value of min-height whenever min-height is larger than max-height or height.

So just by setting height:1px on the parent ( so setting a specific height ) the value of height:50% of the child will compute to 50% of the parent's height. Now, the parents height is not computed to 1px but to the value of min-height . So the child 50% height will be 1/2 of min-height of parent.

Mihai T
  • 17,254
  • 2
  • 23
  • 32