autofill component height in flex column

Question

I am making a Layout.

.container{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  background-color: gray;
}
.header{
  width: 100%;
  height: 80px;
  background-color: red;
}

.content{
  align-self: stretch;
  width: 100%;
  background-color: blue;
}

<div class="container">
  <div class="header">
    Header
  </div>
  <div class="content">
    Be filled the rest part
  </div> 
</div>

What I expect

Condition

I don't want to use calc() in CSS because header's height could be dynamic.

score 1 · Accepted Answer · answered Jun 16 '20 at 12:52

Add flex-grow: 1; to .content

.container{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  background-color: gray;
}
.header{
  width: 100%;
  height: 80px;
  background-color: red;
}

.content{
  align-self: stretch;
  width: 100%;
  background-color: blue;
  flex-grow: 1; /* Add this line */
}

<div class="container">
  <div class="header">
    Header
  </div>
  <div class="content">
    Be filled the rest part
  </div> 
</div>

autofill component height in flex column

1 Answers1