0

I have a column that automatically fills its height using flexbox, and within this I have 4 items that I want to each be 25% of the height of their container.

I've created this fiddle to show my current code: https://jsfiddle.net/fc66rfo3/1/ I want the blue boxes on the right to each be 25% of the height of their yellow container.

I've been using this answer: https://stackoverflow.com/a/23442782/3909886 to try and make my code work, but the items just don't seem to want to flow as I want them to.

My main CSS trying to affect the heights looks like this:

.resources-links {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.col-1of1 {
    height: 25%;
    display: flex;
}
Community
  • 1
  • 1
Sam Willis
  • 4,001
  • 7
  • 40
  • 59
  • 1
    `flex:1` is a useful alternative. But `height` and `flex-basis` can also work. Here's why your `height:25%` isn't working: http://stackoverflow.com/a/31728799/3597276 – Michael Benjamin Apr 12 '16 at 11:55

1 Answers1

2

Don't worry. Just remove "height: 25%;display: flex;" and add "flex: 1;".

CSS:

Remove this

.col-1of1 {
  height: 25%;
  display: flex;
}

Add this

.col-1of1 {
  flex: 1;
}
Rahul K
  • 888
  • 5
  • 16