245

I have a left-right flexbox:

.wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  height: 70vh;
  min-height: 325px; 
  max-height:570px; 
}

.wrapper>.left {
  background: #fcc;
 }

.wrapper>.right {
  background: #ccf;
}
<div class="wrapper">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>

The problem is that the right child is not behaving responsively. To be specific, I want it to fill the height of the wrapper.

How to accomplish this?

2
  • it does fill the height of wrapper! i tested it in Chrome and Firefox and there was no problem. maybe you have simplified your code too much. you can test this by setting background-color for children or setting align-items: center in wrapper. Sep 1, 2015 at 8:48
  • yea, the height of the wrapper is not filled in safari for some reasons... chrome and firefox does this nicely by setting height: '100%' in the children Jul 14, 2017 at 6:43

4 Answers 4

329
  • The children of a row-flexbox container automatically fill the container's vertical space.

  • Specify flex: 1; for a child if you want it to fill the remaining horizontal space:

.wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  height: 5em;
  background: #ccc;
}

.wrapper>.left {
  background: #fcc;
}

.wrapper>.right {
  background: #ccf;
  flex: 1;
}
<div class="wrapper">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>

  • Specify flex: 1; for both children if you want them to fill equal amounts of the horizontal space:

.wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  height: 5em;
  background: #ccc;
}

.wrapper>div {
  flex: 1;
}

.wrapper>.left {
  background: #fcc;
}

.wrapper>.right {
  background: #ccf;
}
<div class="wrapper">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>

6
  • 79
    flex is a shorthand property for flex-grow, flex-shrink, and flex-basis. flex: 1; is equivalent to flex-grow: 1;. Nov 21, 2017 at 1:24
  • 6
    Seems like align-items: stretch; is not needed
    – Matt
    Feb 1, 2020 at 16:43
  • how to add gaps 10px. pixel between? =)
    – fdrv
    Dec 4, 2020 at 0:25
  • @fdrv, you can use gap property on the flex container. Note that it isn't yet supported by Safari, but the support is expected to be added sometime soon. Alternatively, you could use margin-left on all flex items except the first one. Dec 4, 2020 at 7:49
  • 3
    @BarryCap Thanks for the correction. Indeed, flex: 1; is actually equivalent to flex: 1 1 0; or flex-grow: 1; flex-shrink: 1; flex-basis: 0;, according to the docs for flex. Jul 14, 2021 at 16:12
5

short answer: just use the flex:1; for childs

.wrapper {
    display: flex;
    flex-direction: row;
    .
    .
    .
}
.wrapper > * {
    flex: 1;
}

remember that you usually cannot use width: ... and flex:1; together for a single child.

1

Since you have only two children in your container (wrapper), so all you want to do is adding display: flex; and justify-content: space-between; instead of playing with the margin.

Regarding the height, you can set the height you want to the parent (weapper) for example 100px, and then set the height of both children (left and right) to be 100%.

.wrapper {
  display: flex;
  justify-content: space-between;
  height:100px;
}

.wrapper>.left {
  background: #fcc;
  height:100%;
}

.wrapper>.right {
  background: #ccf;
  height:100%;
  flex: 1;
}
<div class="wrapper">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>

0
#children {
    flex-grow: 1;
}

is the right answer. Don't use shorthand properties unless you fully understand (or, care not for) implications.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.