CODEWITHSUNDEEP
htmlcssflexboxheight
steventnorris
steventnorris

Reputation: 5896

Height of Flex Div Not 100%

I have the body full height, but the containing div with a min-height of 100% does not fill. I'd like the blue to fill it's body container and flex align the internal divs.

https://codepen.io/steventnorris/pen/oVdKqY

html {
  min-height: 100%;
  width: 100%;
}

body {
  min-height: 100%;
  width: 100%;
  background-color: green;
}

.main {
  display: flex;
  flex-direction: row;
  min-height: 100%;
  justify-content: space-between;
  background-color: blue;
}
<div class="main">
  <div>Text 1</div>
  <div>Text 2</div>
</div>

Upvotes: 2

Views: 4222

Answers (2)

Akshay Mhatre
Akshay Mhatre

Reputation: 19

You can give .main class a min-height of 100vh.

.main{
 display: flex;
 flex-direction: row;
 min-height: 100vh;
 justify-content: space-between;
 background-color: blue;
 }

Demo: https://codepen.io/anon/pen/pYKzzM

Upvotes: 2

kukkuz
kukkuz

Reputation: 42352

You may want to go through Height Calculation By Browsers : Containing Blocks and Children. Clearly height and min-height are not the same thing in CSS.

Change min-height to height for your body and html - see demo below:

html{
  height: 100%; /* changed to height */
  width: 100%;
}
body{
  height: 100%; /* changed to height */
  width: 100%;
  background-color: green;
}
.main{
  display: flex;
  flex-direction: row;
  min-height: 100%;
  justify-content: space-between;
  background-color: blue;
}
<div class="main">
  <div>Text 1</div>
  <div>Text 2</div>
</div>

You can also give height: 100vh to the main element to set an instrinsic height for the flexbox - see demo below:

body{
  margin: 0;
  height: 100vh; /* full viewport height */
  background-color: green;
}
.main{
  display: flex;
  flex-direction: row;
  min-height: 100%;
  justify-content: space-between;
  background-color: blue;
}
<div class="main">
  <div>Text 1</div>
  <div>Text 2</div>
</div>

Upvotes: 3

Related Questions