28

I am trying to stretch the .side-bar div so that it takes up the height of the entire window.

I added flex to the flex container and specified the flex item widths and heights but the side-bar's height is displaying the same as the flex items.

Is it because of the order of my CSS classes? 

* {
  margin: 0;
}

.flex-container {
  display: flex;
  height: 500px;
  border: 1px solid blue;
}

.flex-items {
  width: 100px;
  height: 250px;
  border: 1px solid red;
}

.side-bar {
  width: 400px;
  align-self: stretch;
}
<div class="flex-container">
  <div class="flex-items side-bar"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
</div>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Froy
  • 708
  • 1
  • 6
  • 15

2 Answers2

58

You have specified a height on your flex items. 

.flex-items {
   width: 100px;
   height: 250px;
   border: 1px solid red;
}

This height rule overrides stretch on align-items and align-self (here's why).

Also, adding align-self: stretch to .side-bar would do nothing anyway because stretch is already applied – it's the default value.

Try this instead:

* {
  margin: 0;
}

.flex-container {
  display: flex;
  height: 500px;
  border: 1px solid blue;
}

.flex-items:not(.side-bar) { /* modified selector */
  width: 100px;
  height: 250px;
  border: 1px solid red;
}

.side-bar {
  width: 400px;
  background-color: yellow;
  border: 1px solid red;
}
<div class="flex-container">
  <div class="flex-items side-bar"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
</div>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
7

align-self only works in combination with the align-items (cross-axis) of the parent container, which in turn works in combination with flex-direction: column. So in your case it has no effect. Remove the align-self and add height: 100% and it will work.

Update Fiddle (thanks to Michael_B)

Reference Flexbox|Codrops Reference

Rene van der Lende
  • 4,992
  • 2
  • 14
  • 25