Make flex child element occupy 100% height of parent flex

Question

I have a container flex with content flexes. How do i make content flex occupy full width and height of container flex.

<div id="main">
<div id="main-nav">
</div>
<div class="container">
    <div class="content"></div>
    <div class="content"></div>
</div>
</div>

#main{
   display: flex;
   flex-direction: column;
   height: 100vh;
   width: 100vw;
}
#main-nav{
    width: 100%
    height: 50px; 
}
.container{
display: flex;
flex-direction: row;
flex-wrap: wrap;
flex: 1;
}
.content{
display: flex;
width: 100%;
height: 100%;
}

The above code makes content to occupy 100% width of container but height is based on the text within the content. I tried the solutions mentioned from similar questions but had no luck and it was still the same.

Basically, I want each of the content to occupy the same height as occupied by the container in the viewport height. I also tried jQuery,

var rht = $("#container").height();
$(".content").height(rht);

It changes the height properly but adds a horizontal scroll bar with increase in width.

doesn't the answer below solve this issue..? – T J Apr 19 '16 at 12:31 — T J, Apr 19 '16 at 12:31

Paulie_D · Answer 1 · 2015-08-09T08:57:51.907

2

After several updates to the original question:

* {
  box-sizing: borderbox;
  margin: 0;
  padding: 0;
}
#main {
  display: flex;
  flex-direction: column;
  border: 1px solid red;
  min-height: 100vh;
}
#main-nav {
  flex: 0 0 50px;
}
.container {
  display: flex;
  flex-direction: column;
  flex: 1;
  border: 1px solid green;
}
.content {
  flex: 1;
  border: 1px solid orange;
}

<div id="main">
  <div id="main-nav"></div>
  <div class="container">
    <div class="content"></div>
    <div class="content"></div>
  </div>
</div>

JSfiddle Demo

edited Aug 09 '15 at 08:57

answered Aug 08 '15 at 19:58

Paulie_D

107,962
13
142
161

Please find the updated code. That is my actual case. Am I going wrong anywhere? – Dinesh Babu Rengasamy Aug 08 '15 at 20:06
Updated again. it takes full viewport height. – Dinesh Babu Rengasamy Aug 08 '15 at 20:20
So sorry for so many edits. I want to make contents occupy full width and height of container flex with one below the other. – Dinesh Babu Rengasamy Aug 08 '15 at 20:35

Thuc Nguyen · Answer 2 · 2017-10-29T07:58:41.210

You cannot set width or height of flex's child is bigger (size of flex)/(number of flex's childs) but you can add position: absolute into .content and position: relative into .container then set width and height for .content. First .content is under second .content, you can use propety z-index or display: none to control.

* {
  box-sizing: borderbox;
  margin: 0;
  padding: 0;
}
#main {
  display: flex;
  flex-direction: column;
  background: red;
  min-height: 100vh;
}
#main-nav {
  flex: 0 0 50px;
}
.container {
  position: relative;
  display: flex;
  flex: 1;
  background: green;
}
.content {
  position: absolute;
  left: 0px;
  top: 0px;
  height: 100%;
  width: 100%;
  flex: 1;
  background: orange;
}

<div id="main">
  <div id="main-nav"></div>
  <div class="container">
    <div class="content">left</div>
    <div class="content">right</div>
  </div>
</div>

Make flex child element occupy 100% height of parent flex

2 Answers2