flex box not getting full height with flex-wrap

Question

I have created a simple JSFiddle below. Why is it that my pink box (.screen) isn't growing to the full height all the way up to the red and blue boxes?

I have tried to set height: 100% on the screen div but that makes it grow out-of the the .inner-container and placing itself above the .bottom.

EDIT I have an issue with putting .screen outside of .inner-container that I forgot to tell about. When the page is first initialized the .screen will have a display:none because the user has not started screen-sharing. When the user clicks the button to share his screen I will set .subscriber to width: 10rem and .screen will be displayed. By just using width I can then "move" the subscriber container from the middle up to the top.

EDIT 2 To more show what I'm after you can remove the flex: 0 1 100% from .screen and add width: 100%; height: calc(100% - 10.5rem);. This just feels like I should be able to do with flex but maybe not.

Solution I ended up moving the .screen outside of .inner-container and I'm dynamically switching the flex-direction between row and column on .inner-container to get the desired outcome. See @vals answer on why this is not possible using flex-box right now.

Here is the JSFiddle: https://jsfiddle.net/kejq01s2/2/

.outer-container {
  height: 100vh;
  background: yellow;
  display: flex;
  flex-direction: column;
}

.inner-container {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
}

.publisher {
  width: 10rem;
  height: 10rem;
  background: red;
  margin: .5rem;
}

.subscriber {
  width: 10rem;
  height: 10rem;
  background: blue;
  margin: .5rem;
}

.screen {
  background: pink;
  flex: 0 1 100%;
}

.bottom {
  width: 100%;
  height: 6rem;
  background: green;
}

<div class="outer-container">
  <div class="inner-container">
    <div class="publisher"></div>
    <div class="subscriber"></div>
    <div class="screen"></div>
  </div>
  <div class="bottom"></div>
</div>

@TemaniAfif I have updated my question. Need to have all three divs inside of ```.inner-container``` so I can dynamically move around objects. — Cous, Apr 13 '20 at 13:36
You're not factoring in the effect of `align-content: stretch`, a default setting on flex containers. See the duplicate posts for an explanation. — Michael Benjamin, Apr 13 '20 at 16:43
Also, set a height on the pink item, because without height or content, it can shrink to 0 height. — Michael Benjamin, Apr 13 '20 at 16:45
@Michael_B I reopened this question. I don't think that using align-content or align-self is the solution for this problem. I had already tried them, without succes. At the moment, I don't think this is achievable using flex. (would like to be proved wrong) — vals, Apr 13 '20 at 17:17
@vals, Maybe I misunderstood the question, but I thought `align-content` explained the problem. — Michael Benjamin, Apr 13 '20 at 18:24
@Michael_B I have added an answer explaining what is the problem, as I understand it — vals, Apr 14 '20 at 06:31
@vals thanks for your help. Updated my post with how I solved my problem using flexbox. — Cous, Apr 14 '20 at 08:00

vals · Accepted Answer · 2020-04-14T06:30:43.370

This is not an answer to show you how to achieve this, but an explainer of what is happening, and why you can not get what you want.

Since the flex-direction is row, the height is the cross-axis. You can control this size with 2 styles, align-items and align-content

If you set align-items to stretch, then the items will grow ... until they reach the flex-line height. (The flex container sets the items in lines, even though those are not visible).

If you set align-content to stretch, then the flex-lines will grow to fill all available space in the container.

Now, in your layout, screen has no height. So, when the flex-lines are dimensioned, the first line gets the height of about 11em , the publisher height. The second line gets a height of 0. Setting align-content to stretch will make the flex-lines grow until they fill all available space in the container.

BUT, the extra space will be distributed equally between the first and the second line. So, the second line can not grow to fit the perceived height of the first line.

You can set the screen element to grow individually, that is done with a variant of align-items that is align-self, this one is set at the children instead of the parent, so it is selective. BUT, you don't have a property to decide which flex-line grows, so you are out of luck.

May be you could get this layout to work with css-grids, but I don't know all the requirements of your case to be sure about this.

flex box not getting full height with flex-wrap

1 Answers1