В чем проблема блоку определить доступную высоту?

Question

[nikmil]

Почему блок list, не занимает доступную высоту блока info?
Если блоку info задать высоту, то все будет работать как надо, а мне хочется чтобы блок info занимал доступную высоту.
Подскажите пожалуйста в чем причина?

Answer 1

[szQocks]

потому что у тебя у блока info стоит flex-direction: column; ( вертикальная ось ) в которой за расположением высоты элементов уже отвечает justify-content - а значение по умолчанию у justify-content является flex-start, по факту если указать блоку info justify-content: stretch он должен элементы флекс контенера распределить так что бы высота у элементов занимала всё пространство, но по какой-то причине этой магии не происходит, зато если указать блоку .list явно что он должен занимать пространство всё относительно свой оси, а если он является вертикальная то flex: 1 1 0; - даст блоку возможность занимать всю высоту

Comments

[nikmil]

Интересно, попробовала вариант с justify-content: stretch он почему то не сработал.
а flex: 1 1 0; сработал.
Куда нужно именно добаваить justify-content: stretch? в info?

[szQocks]

nikmil, да, должно сработать хм

[szQocks]

nikmil, либо justify-content: stretch для info, либо для list flex: 1 1 0;

[nikmil]

szQocks, все равно интересно как тут сработает justify-content: stretch, или ему что- то мешает?
В любом случае спасибо большое за разъяснение!

[szQocks]

nikmil, немного не понял, что мешает ? он работает не так как надо ?

[nikmil]

szQocks, да он (justify-content: stretch) не срабатывает

[nikmil]

szQocks, codepen обновила, добавила в info

[szQocks]

nikmil, да действительно justify-content: stretch не работает, но по факту должен работать

но сам же justify-content - если ось является вертикальной - уже отвечает за расположение элементов по высоте контейнера, так что с этим я был прав, а на счёт justify-content: stretch - нет, исправлю ответ

[szQocks]

nikmil, тут кстати вообще мой ответ не к месту, потому что если бы я не тупил то понял бы что и высота работает вахха) , но мой ответ больше относится к проблеме которая связана с максимальной-высотой

вот тут он будет в самый раз, потому что например в это примере нельзя установить высоту, и тут этой приём в самый раз подходит который я тут в ответе посоветовал

ладно уж удалять ответ не буду, пусть будет отметкой той - как набирался опыта, в проверке своих знаний, со своим тупизмом

[nikmil]

szQocks, в любом случае спасибо за правильное решение и за ваш ответ. Очень было полезно!