Как сделать чтобы блоки росли не только в ширину и но и в высоту?

Question

[beduin01]

При расширение левой панели блоки внутри нее начинают растягиваться в ширину, но не в высоту.

https://jsfiddle.net/p7mLftqq/2/

Вопрос. Как сделать, чтобы они растягивались и по высоте?

А так же при очень сужении панели они бы выстраивались в один ряд. Такое возможно?

Answer 1

[Алексей Сол]

А так же при очень сужении панели они бы выстраивались в один ряд.

Примените к селектору меню - "menu" - стили:

flex-direction: row;
flex-wrap: nowrap;
/* или */
flex-flow: row nowrap;

Таким образом, вы запретите перенос элементов на новую строку. И при "ужимании" блока, элементы будут пытаться ужаться в одной строке. Разумеется, до определённой степени, после которой они начнут просто выходить за границы блока.

По поводу высоты — для меня сложный вопрос. На данном этапе с помощью CSS такое решить нельзя. Только используя JS. Хотя, честно говоря, хотелось бы, чтобы в следующих версиях CSS был реализован механизм пропорций.

Comments

[dom1n1k]

Можно чистым CSS. С костылями, конечно, но можно.

Answer 2

[dom1n1k]

Вероятно, нужно что-то наподобии?
https://css-tricks.com/scaled-proportional-blocks-...

Answer 3

[Александр Таратин]

www.mademyday.de/css-height-equals-width-with-pure...