Почему flex-basis нуждается в заданной высоте?
У меня есть система чата с очень простым макетом заголовка, тела и нижнего колонтитула, за исключением того, что тело должно быть прокручиваемым. Я пытался придумать не хакерское (фиксированная высота для каждого окна просмотра) решение, и это был окончательный результат, который получился совершенно случайно:
flex-basis: auto;
overflow-y: scroll;
height: 1px;
Он отлично работает во всех разрешениях, тело занимает столько места, сколько может, а остальная часть прокручивается, как задумано. Проблема в том, что я не очень понимаю это решение, разве flex-basis: auto не должно быть достаточно для этого расчета? почему я должен установить высоту?
Я установил его равным 1px, потому что, если высота больше, чем доступное пространство, высота имеет приоритет над высотой гибкости.
Ответы 1
[flex-basis] defines the default size of an element before the remaining space is distributed. It can be a length (e.g. 20%, 5rem, etc.) or a keyword. The auto keyword means "look at my width or height property" (which was temporarily done by the main-size keyword until deprecated). The content keyword means "size it based on the item's content" - this keyword isn't well supported yet, so it's hard to test and harder to know what its brethren max-content, min-content, and fit-content do.
Вероятно, это связано с тем, что при установке для него значения auto он ищет свойство ширины или высоты, которое в противном случае не установлено.
Дополнительные сведения о flexbox см. в статье https://css-tricks.com/snippets/css/a-guide-to-flexbox/.
Если вы хотите, чтобы контейнер увеличивался до выделенного пространства без определения заданной высоты/ширины, вы всегда можете использовать flex-grow.
[flex-grow] defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.
If all items have flex-grow set to 1, the remaining space in the container will be distributed equally to all children. If one of the children has a value of 2, the remaining space would take up twice as much space as the others (or it will try to, at least).
Одна вещь, которую следует иметь в виду при использовании flex-grow, заключается в том, что элемент будет расти только до того места, которое позволяет родительский элемент, например, если для высоты страницы установлено значение 100%, даже если содержимого недостаточно для его заполнения. Пример можно увидеть здесь: jsfiddle.net/Мэттью_/90gLy6nw/6
Это первоначальная проблема, я не хочу устанавливать высоту вручную. В идеале высота будет рассчитана, я не мог создать это с помощью flex-grow. Высота 100vh не является допустимым решением, так как я должен учитывать верхний и нижний колонтитулы.
если вы посмотрите на скрипт, который я разместил, тело контента на самом деле не имеет никакой высоты, только тег html и body
Спасибо, что нашли время ответить! Я пробовал flex-grow, однако это не сработало, как предполагалось.