height 100% in flex

0
votes

I want to make the content div to fit 100% height. For some reason, the container div happen to be a flex item. Is that appropriate to set 100% height to a div within a flex item? or I should set the content div to be a flex item as well.

Also, the flex-direction part is confusing. column do not work, but row do. I suppose the flex-direction only effect on the flex item.

jsfiddle here

<div class="wrapper">
  <div class="container">
    <div class="content">
      Hello there
    </div>
  </div>
</div>


html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.wrapper {
  border: 1px solid red;
  padding: 20px;
  min-height: 100%;
  display: flex;
  /* change flex-direction from column to row will work */
  flex-direction: column;
}

.container {
  border: 1px solid green;
  padding: 20px;
  flex: 1;
}

.content {
  border: 1px solid blue;
  height: 100%;
}
2
htmlcssflexbox
for future reference, use the tag flexbox and css3 instead of flex to call the flex-man experts ;) - Temani Afif
now you will get you answer within few minutes :) - Temani Afif

2 Answers

2
votes

You can overlap (nest) flex boxes :

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.wrapper {
  border: 1px solid red;
  padding: 20px;
  min-height: 100%;
  display: flex;
  /* change flex-direction from column to row will work */
  flex-direction: column;
  box-sizing:border-box;
}

.container {
  display:flex;
  flex-direction: column;/* up to your needs */
  border: 1px solid green;
  padding: 20px;
  flex: 1;
}

.content {
  border: 1px solid blue;
  flex:1;
}
<div class="wrapper">
  <div class="container">
    <div class="content">
      Hello there
    </div>
  </div>
</div>

You may also mind the box-sizing properties to include borders and padding in size calculation.

0
votes

You can try this:

.wrapper {
  border: 1px solid red;
  padding: 20px;
  min-height: 100%;
  /* This set a precise value for the height */  
  height: 100%;
  display: flex;
  /* change flex-direction from column to row will work */
  flex-direction: column;
}