flexbox how to have items resize both horizontally and vertically whilst preserving height

Question

Here is my problem:

I have a 3 containers inside a container with content inside those containers.

I want to have each of those containers fill up any remaining room if one is removed both vertically and horizontally.

I use flexbox with flex-flow: row wrap and this works great when let's say we delete one of the two bottom containers.

Then in order to have them re-size vertically I use the height auto property and predictably the container element fills up the remaining height of its container.

<!DOCTYPE html>
<html>
<head>
    <style>
        div{border: 1px solid black}
        html, body{height: 100%; width: 100%;}
        #container1{
            width: 100%;
            height: 100%;
            display: flex;
            flex-flow: row wrap;
        }
        #subContainer3, #subContainer2{
            flex: 1 49%;
        }
        #subContainer1{
            flex: 1 100%;
        }
        .content{
            background-color: lightgray;
            height: 90%;
        }
    </style>
</head>
<body>
    <div id="container1">
        <div id="subContainer1">
            <div class="content"></div>
        </div>
        <div id="subContainer2">
            <div class="content"></div>
        </div>
        <div id="subContainer3">
            <div class="content"></div>
        </div>
    </div>
</body>
</html>

However because I do not set an explicit height for the sub containers, all the content within them will not be able to be a percentage of the sub containers.

How can I achieve the desired goal of having the sub containers resize both in the row and column directions and at the same time having their contents be a percentage of their height?

****Note****

As an additional comment, whilst this may be obvious to some, any height determined by the flex box will still be unrecognized by any child div attempting to use percentage height. For example, if our content divs where to they themselves have children which wanted to be a % of their parent's height, we would have to use flex-box in the column direction to establish this instead of %height.

I think the `height: 90%;` won't work here, as the largest `content` determines height of the outer container, and the flex row, and you're saying `height: 90%` of itself? — Olex Ponomarenko, Feb 12 '16 at 20:46
Sorry I know the height 90% will not work, I am just illustrating the problem with the code. I want a solution where I can keep the height 90% and at the same time be able to have the subContainer divs expand vertically.Once I set a height to the subContainer, the content height (90%) will work, but then if I remove let's say the div from the tio, the remaining divs will not expand to fill up the height. — Pasha Skender, Feb 12 '16 at 20:49
So there's siblings to `.content`? And you want the `content` to increase proportionally (9x the height) of the other items in the `subContainer`? The design you want is unclear =/ — Olex Ponomarenko, Feb 12 '16 at 21:00

score 1 · Answer 1 · answered Feb 12 '16 at 20:57

You need to add an extra wrap around subcontainers 2 & 3 and use nested flex. The following example demonstrates that.

 html,
 body {
   height: 100%;
   width: 100%;
 }
 #container1 {
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
 }
 .horizontal {
   display: flex;
   flex-flow: row wrap;
   flex: 1 0 auto;
 }
 #subContainer1,
 #subContainer2,
 #subContainer3 {
   flex: 1 0 auto;
   border: 1px solid black;
 }
 .content {
   background-color: lightgray;
 }

<div id="container1">
  <div id="subContainer1">
    <div class="content"></div>
  </div>

  <div class="horizontal">
    <div id="subContainer2">
      <div class="content"></div>
    </div>
    <div id="subContainer3">
      <div class="content"></div>
    </div>
  </div>
</div>

Tarek.hms · Accepted Answer · 2016-02-17T04:48:45.690

you can achieve that by add another flexbox to the subcontainer DIVs:

    div{border: 1px solid black}
    html, body{height: 100%; width: 100%; margin:0;padding:0}
    #container1{
        width: calc(100% - 4px);
        height: calc(100% - 4px);
        display: flex;
        flex-flow: row wrap;
    }
    #subContainer3, #subContainer2{
        flex: 1 49%;
        display:flex;
        flex-flow: column wrap;
    }
    #subContainer1{
        flex: 1 100%;
        display:flex;
        flex-flow: column wrap;
    }
    .content{
        flex: 1 100%;
        background-color: lightgray;
    }

<div id="container1">
    <div id="subContainer1">
        <div class="content"></div>
    </div>
    <div id="subContainer2">
        <div class="content"></div>
    </div>
    <div id="subContainer3">
        <div class="content"></div>
    </div>
</div>

Notice: I removed the margin and padding from page to avoid the scrolls and as long as you want to keep the borders I also edited the main container div's width and height to be minus 4px which are the borders extra width and height

If I set the height to the subcontainer's div, then they will not expand flexibly in the vertical direction like they do in the horizontal direction when a subcontainer is removed. For example if you delete subContainer1, the other two subcontainers dont' fill up the entire page. That's the essence of the question — Pasha Skender, Feb 12 '16 at 21:39
yes sorry, I edited the answer I think it will do what you are looking for now — Tarek.hms, Feb 12 '16 at 22:30

score 0 · Answer 3 · edited May 23 '17 at 12:23

Try just using padding to add some placeholder height and the default align-items: stretch; should keep the content columns equal heights. Using height: 90%; in a child of a dynamic-height container doesn't make sense.

You can find a good description of when height with a % value works and doesn't work here. I also have an answer in there of how to make a height proportional to the width of the container, which might be an option for your design:

Percentage Height HTML 5/CSS

flexbox how to have items resize both horizontally and vertically whilst preserving height

3 Answers3