CODEWITHSUNDEEP
htmlcssflexbox
Anthony Kong
Anthony Kong

Reputation: 40624

How to make a flex element fully expand to fill the containing element?

Here is my code.

I want the element .container to fully expand and occupy the area of .toplevel. 

.toplevel {
  height: 100%;
  min-height: 800px;
  border: solid 1px blue;
}

.container {
  display: flex;
  border: solid 1px red;
  height: 100%;
  flex: 0 1 auto;
  flex-direction: column;
  // min-height: 800px;
}

.up {
  display: flex;
  flex: 1 1 auto;
}

.down {
  display: flex;
  flex: 0 1 auto;
}
<div class="toplevel">
  <div class="container">
    <div class="up">
      This is up
    </div>
    <div class="up">
      This is down
    </div>
  </div>
</div>

However it seems like the only way to make the .container larger height-wise is to define a min-height. It is too inflexible because I will have provide a different value for different device form factor.

How can I fix it?

Upvotes: 4

Views: 26346

Answers (4)

Asons
Asons

Reputation: 87191

Simpy add display: flex to .toplevel and remove height: 100% from .container.

This work based on the fact that flex row item's height behavior can be controlled with the align-items property. As it by default has stretch, it will fill its parents height.

As a note, in general, when it comes to Flexbox, it is preferable to make use of its own properties instead of height/width. By doing so you also get a better cross browser support.

Stack snippet

.toplevel {
  height: 100%;
  min-height: 800px;
  border: solid 1px blue;
  display: flex;              /* added  */
}

.container {
  display: flex;
  border: solid 1px red;
  /*height: 100%;                removed  */
  flex: 1 1 auto;            /*  changed, flex row item need the grow value
                                          to be 1 to fill its parent's width  */
  flex-direction: column;
}

.up {
  display: flex;
  flex: 1 1 auto;
}

.down {
  display: flex;
  flex: 0 1 auto;
}
<div class="toplevel">
  <div class="container">
    <div class="up">
      This is up
    </div>
    <div class="down">
      This is down
    </div>
  </div>
</div>

Upvotes: 12

Temani Afif
Temani Afif

Reputation: 272590

Make toplevel display:flex also with column direction and then add flex:1 to container :

I suppose you made a mistake in the code as you added two up divs so I corrected

.toplevel {
  height: 100%;
  min-height: 800px;
  border: solid 1px blue;
  display:flex;
  flex-direction:column;
}

.container {
  display: flex;
  border: solid 1px red;
  flex: 1;
  flex-direction: column;
}

.up {
  display: flex;
  flex: 1 1 auto;
}

.down {
  display: flex;
  flex: 0 1 auto;
}
<div class="toplevel">
  <div class="container">
    <div class="up">
      This is up
    </div>
    <div class="down">
      This is down
    </div>
  </div>
</div>

Upvotes: 2

VXp
VXp

Reputation: 12058

You can reverse the height and min-height of the .toplevel:

.toplevel {
  height: 800px;
  min-height: 100%;
  border: solid 1px blue;
}

.container {
  display: flex;
  border: solid 1px red;
  height: 100%;
  flex: 0 1 auto;
  flex-direction: column;
  /*min-height: 800px;*/
}

.up {
  display: flex;
  flex: 1 1 auto;
}

.down {
  display: flex;
  flex: 0 1 auto;
}
<div class="toplevel">
  <div class="container">
    <div class="up">
      This is up
    </div>
    <div class="up">
      This is down
    </div>
  </div>
</div>

Upvotes: 1

Ori Drori
Ori Drori

Reputation: 191936

To use percentage height, you need all parents to have a set height. In your case .toplevel parent body, doesn't have height, so .toplevel height of 100% doesn't work, and it causes the .container height to fail as well. A simple solution is to set the .toplevel height using vh units instead of percentage:

.toplevel {
  height: 100vh;
  min-height: 800px;
  border: solid 1px blue;
}

.container {
  display: flex;
  border: solid 1px red;
  height: 100%;
  flex: 0 1 auto;
  flex-direction: column;
  // min-height: 800px;
}

.up {
  display: flex;
  flex: 1 1 auto;
}

.down {
  display: flex;
  flex: 0 1 auto;
}
<div class="toplevel">
  <div class="container">
    <div class="up">
      This is up
    </div>
    <div class="up">
      This is down
    </div>
  </div>
</div>

Upvotes: 1

Related Questions