How to make the Inner Flex Height to acquire all the space

Question

I am trying to make a Grids with flexbox, But the height is not working, I think I am missing something about the percentage height property in flex. I want to Achieve this

but I am getting this.

I am Trying to do it using flexbox.

body {
  margin: 0px;
}

.wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.container {
  background: blue;
  display: flex;
  flex: 1 100%;
}

.navigation {
  display: flex;
  flex: 0 60px;
  background: green;
}

.chat-list {
  background: rgba(255, 50, 40, 0.5);
  width: 22%;
}

.chat-profile {
  background: rgba(55, 250, 40, 0.5);
  width: 18%;
}

.chats {
  width: 60%;
  background: orange;
}

<body>
  <div class="wrapper">
    <div class="navigation">NAVIGATION</div>
    <div class="container">
      <div class="chat-list">CHAT LIST</div>
      <div class="chats">CHATS</div>
      <div class="chat-profile">CHAT_PROFILE</div>
    </div>
  </div>
</body>

score 1 · Answer 1 · answered Apr 03 '18 at 07:03

You will need to set height:100vh to the .wrapper to take the full viewport height and also flex-shrink:0 to the .navigation class so that it can take all 60px height.

body {
  margin: 0px;
}

.wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.container {
  background: blue;
  display: flex;
  flex: 1 100%;
}

.navigation {
  display: flex;
  flex: 1 0 60px;
  background: green;
}

.chat-list {
  background: rgba(255, 50, 40, 0.5);
  width: 22%;
}

.chat-profile {
  background: rgba(55, 250, 40, 0.5);
  width: 18%;
}

.chats {
  width: 60%;
  background: orange;
}

<div class="wrapper">
  <div class="navigation">NAVIGATION</div>
  <div class="container">
    <div class="chat-list">CHAT LIST</div>
    <div class="chats">CHATS</div>
    <div class="chat-profile">CHAT_PROFILE</div>
  </div>
</div>

Worked Like Charm ! Thnks – Amar Pathak Apr 03 '18 at 07:09 — Amar Pathak, Apr 03 '18 at 07:09

score 0 · Answer 2 · answered Apr 03 '18 at 07:01

0

Add to your css:

html, body {
  height: 100%;
}
.wrapper{
  min-height: 100%;
}

answered Apr 03 '18 at 07:01

Fecosos

944
7
17

score 0 · Answer 3 · answered Apr 03 '18 at 07:02

Your code is actually fine. It's just that it's taking 100% height of the body/html which tries to dynamically scale to your content. Giving you a thin height page. Simply set the height of body and html to 100% will fix this for you.

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

.wrapper{
 display: flex;
 flex-direction: column;
  height:100%;
}

.container{
 background:blue;
 display: flex;
 flex: 1 100%;
}
.navigation{
 display: flex;
 flex: 0 60px;
 background: green;
}
.chat-list{
 background: rgba(255,50,40,0.5);
 width:22%;

}
.chat-profile{
 background: rgba(55,250,40,0.5);
 width: 18%;
 
}
.chats{
 width: 60%;
 background: orange;
}

<body>
 <div class="wrapper">
  <div class="navigation">NAVIGATION</div> 
  <div class="container">
   <div class="chat-list">CHAT LIST</div>
   <div class="chats">CHATS</div>
   <div class="chat-profile">CHAT_PROFILE</div> 
  </div>
 </div>
</body>

score 0 · Answer 4 · answered Apr 03 '18 at 07:06

You should set height of html, body, .wrapper to 100% (in order to inherit full height) and then just set a flex value greater than 1 to .row3 and not on the others.

.wrapper, html, body {
    height: 100%;
    margin: 0;
}
.wrapper {
    display: flex;
    flex-direction: column;
}
.navigation {
    background-color: red;
}
.container {
    flex:2;
    display: flex;
}
.chat-list {
    background-color: yellow;
    flex: 0 0 240px;
}
.chats {
    background-color: orange;
    flex: 1 1;
}
.chat-profile {
    background-color: purple;
    flex: 0 0 240px;
}

<div class="wrapper">
    <div class="navigation">NAVIGATION</div>
    <div class="container">
        <div class="chat-list">CHAT LIST</div>
        <div class="chats">CHATS</div>
        <div class="chat-profile">CHAT_PROFILE</div>
    </div>
</div>

How to make the Inner Flex Height to acquire all the space

4 Answers4