CODEWITHSUNDEEP
htmlcssflexbox
Konstantin Vahrushev
Konstantin Vahrushev

Reputation: 1208

How to stretch flex child to fill height of the container?

I need to stretch yellow child to fill all height of parent. Without setting parent height. Height of parent should be dependent on blue child text. https://jsfiddle.net/7vaequ1c/1/

<div style='display: flex'>
  <div style='background-color: yellow;height: 100%; width: 20px'>
  </div>
  <div style='background-color: blue'>
  some<br>
  cool<br>
  text
  </div>
</div>

Upvotes: 59

Views: 126080

Answers (5)

OctaviaLo
OctaviaLo

Reputation: 1396

Not directly pertaining to OP's example, but if you want to get the flex child to grow in the vertical direction, use flex-grow: 1 on the child. In the image, the parent has display:flex and flex-direction: column.

enter image description here

Upvotes: 1

Asons
Asons

Reputation: 87191

When using Flexbox, the major mistake is to start using height: 100% all over.

We are used to that in many cases, though when it comes to Flexbox, it often breaks it instead.

One reason it often breaks when using height: 100%, is that the element's parent (parent of the element one want to stretch), need a set height in one way or the other, which flexbox doesn't when not using it.

Another reason is, when there is children above and/or below, using 100% on one of those children, it will not take the other children into account, and again often break.

The solution is simple, just remove the height: 100%, and it will work automatically.

The reason it does, is for flex item in row direction (the default), the align-items control the vertical behavior, and as its default is stretch this just work as is.

Stack snippet

<div style='display: flex'>
  <div style='background-color: yellow; width: 20px'>
  </div>
  <div style='background-color: blue'>
    some<br> cool<br> text
  </div>
</div>

Upvotes: 143

Mas Ghahremani
Mas Ghahremani

Reputation: 77

Remove

height:100%;

and instead do something like this example :

<div style="display:flex; flex-direction:column">
<div style="flex-grow:1;"> Item 1 </div>
<div style="flex-grow:1;"> Item 2 </div>
</div>

above example will show you what you want.

Upvotes: 4

Daniel Sixl
Daniel Sixl

Reputation: 2499

If I understood correctly, you are looking for the align-items property, which defines the layout along the cross axis, in this case vertically.

You can find a good overview here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.flexbox {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch; // <-- stretch vertical (default value, can be omitted here)
  align-content: center;
}

.box {
    padding: 1em;
    text-align: center;
    margin: 1em;
}

.box--yellow {
  background-color: yellow;
}

.box--blue {
  background-color: blue;
  color: white;
}
<div class="flexbox">
  <div class="box box--yellow">
    yellow
  </div>
  <div class="box box--blue">
    some<br>
    cool<br>
    text
  </div>
</div>

Upvotes: 15

davemaloney
davemaloney

Reputation: 31

Here you go:

<div style='display: flex;'>
  <div style='background-color: yellow; flex: none auto; width: 20px'></div>
  <div style='background-color: blue'>
    some<br>
    cool<br>
    text
  </div>
</div>

Upvotes: -5

Related Questions