Элементы Flex 25% высота

Question

У меня есть столбец, который автоматически заполняет его высоту с помощью flexbox, и в этом я имею 4 элемента, которые я хочу, чтобы каждый из них составлял 25% от высоты их контейнера.

Я создал эту скрипку, чтобы показать свой текущий код: https://jsfiddle.net/fc66rfo3/1/ Я хочу, чтобы синие квадратики справа были на 25% от высоты их желтого контейнера.

Я использовал этот ответ: https://stackoverflow.com/a/23442782/3909886, чтобы попытаться заставить мой код работать, но элементы, похоже, не хотят течь, как я хочу.

Мой основной CSS пытается повлиять на высоту выглядит следующим образом:

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

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

Answer 1

Не волнуйтесь. Просто удалите «высота: 25%; дисплей: flex;» и добавьте «flex: 1;».

CSS:

Удалить эту

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

Добавить

.col-1of1 { 
    flex: 1; 
}