Why doesn't flex item fill the remaining space?

Question

I'm trying to align elements using flexbox

jsFiddle: https://jsfiddle.net/x6m7qnyp/

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

.left {
  flex: 15%;
  background-color: rgb(255, 0, 0);
  height: 150px;
}

.rightTop {
  flex: 85%;
  background-color: rgb(0, 255, 0);
  align-self: flex-start;
}

.rightBottom {
  flex: 85%;
  background-color: rgb(0, 0, 255);
}

<div class="container">
  <div class="left">
    LEFT
  </div>
  <div class="rightTop">RIGHT TOP</div>
  <div class="rightBottom">RIGHT BOTTOM</div>
</div>

As you you can see, the last element goes down under the .left div even though I set flex to 85%.

What I want is to make the right bottom element fill the remaining space under the right top element. It should look like this:

I know that I can achieve this by wrapping right top and right bottom elements with a container, but I want to know if there is a way to do this with the current markup. And also, can you please explain why the right bottom element goes down instead of filling the remaining space?

score 0 · Answer 1 · answered Apr 06 '17 at 21:55

0

I would put the right rows in a flex column

.flex {
  display: flex;
}

.left {
  flex-basis: 15%;
  background-color: rgb(255, 0, 0);
  height: 150px;
}

.right {
  flex-grow: 1;
  flex-direction: column;
}

.rightTop {
  background-color: rgb(0, 255, 0);
}

.rightBottom {
  background-color: rgb(0, 0, 255);
  flex-grow: 1;
}

<div class="flex">
  <div class="left">
    LEFT
  </div>
  <div class="flex right">
    <div class="rightTop">RIGHT TOP</div>
    <div class="rightBottom">RIGHT BOTTOM</div>
  </div>
</div>

answered Apr 06 '17 at 21:55

Michael Coker

52,626
5
64
64

yeah. I understand that it will work with a wrapper, but I don't understand why does it work like this now (why right bottom element goes down if there is enough space). – alinaish Apr 06 '17 at 22:05
1

@alinaish because when elements wrap, it creates a new flex row. So the wrapped element starts a new row. – Michael Coker Apr 06 '17 at 22:19

score 0 · Answer 2 · answered Apr 06 '17 at 21:56

Hey I would just wrap the right side in it's own container called .right and go from there. Also I changed the heights of .rightTop and .rightBottom to match up.

HTML

<div class="container">
  <div class="left">
    LEFT
  </div>
  <div class="right">
  <div class="rightTop">RIGHT TOP</div>
  <div class="rightBottom">RIGHT BOTTOM</div>
    </div>
</div>

CSS

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

.left {
  flex: 15%;
  background-color: rgb(255, 0, 0);
  height: 150px;
}

.right {
  flex: 85%;
}

.rightTop {
  height: 20px;
  background-color: rgb(0, 255, 0);
  align-self: flex-start;
}

.rightBottom {
  background-color: rgb(0, 0, 255);
  height: 130px;
}

Codepen example: https://codepen.io/StefanBobrowski/pen/bqyQWJ

score -1 · Answer 3 · edited Apr 07 '17 at 01:27

-1

Wrap the top right top and right bottom div in a container.

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

.left {
  flex: 15%;
  background-color: rgb(255, 0, 0);
 width:15px;
  flex-grow:0;
}

.rightTop {
  background-color: rgb(0, 255, 0);
  align-self: flex-start;
}

.rightBottom {
  background-color: rgb(0, 0, 255);
  height: 100px;
}

<div class="container">
  <div class="left">
    LEFT
  </div>
  <div>
   <div class="rightTop">RIGHT TOP</div>
  <div class="rightBottom">RIGHT BOTTOM
  </div>
</div>
</div>

edited Apr 07 '17 at 01:27

answered Apr 06 '17 at 21:54

repzero

8,254
2
18
40

1

Yes, I know that it works, but my question is how to do it with the current markup and why right bottom element goes down – alinaish Apr 06 '17 at 21:56
It is because you have set a flex of 85% on each div which is greater that 100% width of the parent container... – repzero Apr 06 '17 at 21:59
Not only is that the issue you concept of flex is somewhat strange, the elements will align horizontly have as expected..try adjusting those values and see – repzero Apr 06 '17 at 22:01
I cannot see how 85% is greater than parent container. It's 85% of parent container width. No? – alinaish Apr 06 '17 at 22:01
for guidance check https://developer.mozilla.org/en/docs/Web/CSS/flex – repzero Apr 06 '17 at 22:05

Why doesn't flex item fill the remaining space?

3 Answers3