0

So I have a case with the height property is css.

According to the [definition] (https://www.w3schools.com/cssref/pr_dim_height.asp) a container with height: 50%

Set the height of an element to 50% of the height of the parent element

Here are 2 code snippets, where the only difference is the height property set to 100% or not set at all

With height property set: JSFIDDLE

.parent {
  display: flex;
  min-height: 300px;
  background-color: grey;
  padding: 30px;
}

.child {
  position: relative;
  background-color: red;
  height: 100%;
}

.content {
  margin: 20px;
  height: 50px;
  width: 100px;
  background-color: blue;
}
<div class="parent">
  <div class="child">
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
  </div>
</div>

Without height property set (Working as intended): JSFIDDLE

.parent {
  display: flex;
  min-height: 300px;
  background-color: grey;
  padding: 30px;
}

.child {
  position: relative;
  background-color: red;
}

.content {
  margin: 20px;
  height: 50px;
  width: 100px;
  background-color: blue;
}
<div class="parent">
  <div class="child">
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
  </div>
</div>

For me this works opposite of the definiton of the height property, how come? I have noticed that without display: flex in the parent the behaviour is different, but then height: 100% does nothing.

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Jonas Praem
  • 2,296
  • 5
  • 32
  • 53
  • 1
    tl:dr from the duplicate : without height:100% you have the stretch effect of flexbox .. with height:100% you fail to auto value because you cannot use percentage since parent don't have a height defined – Temani Afif Feb 01 '19 at 10:59
  • as a side note, the definition of w3school isn't complete, you will find the complete on in the duplicate taken from the spec – Temani Afif Feb 01 '19 at 11:02

0 Answers0