Flexbox в Chrome-как ограничить размер вложенных элементов? [дубликат]

На этот вопрос уже есть ответ здесь:



В Google Chrome Как заставить элемент, вложенный в элемент flexbox (под" элементом flexbox " я подразумеваю дочерний элемент элемента, стилизованного под display:flex), ограничить его размер размером элемента flexbox, в который он вложен под водой? Например, предположим, что у меня есть следующее: 



<div style="display:flex; flex-direction:column; height:100vh;">

  <div style="height:60px;">Static header</div>

  <div style="flex: 1 1 0; overflow:hidden;">

     <div style="overflow:auto; height:100%;" id="problem-is-here">

       Lots and lots of content, way too much to fit in the viewport

     </div>

  </div>

</div>


Поскольку первый потомок div самого внешнего div имеет постоянную высоту, он заканчивается ровно 60px высотой, а поскольку второй потомок div имеет flex-grow 1, он получает оставшуюся часть доступного пространства (в этом случае 100% видового экрана минус 60px). Я могу подтвердить, что размеры этого элемента в соответствии с Inspect Element достаточно велики, чтобы занять все остальное пространство видового экрана.



В Firefox и IE11, из-за height:100%, самый внутренний элемент (id="problem-is-here") принимает высоту, вычисленную для его родителя. Поэтому, поскольку он слишком мал для отображения своего содержимого и overflow установлен в auto, он (а не весь body) получает вертикальную полосу прокрутки. Вот чего я хочу.



В Хроме, однако, самый внутренний элемент отображается с достаточной высотой, чтобы содержать все его содержимое, которое является большей высотой, чем его родитель. Таким образом, поскольку его родитель имеет overflow:hidden, не появляется полоса прокрутки и избыточное содержимое недоступный. Как я могу сказать Chrome, чтобы он отображал этот самый внутренний элемент с высотой, не превышающей высоту его родителя, если родительская высота определяется flexbox, а не свойством CSS height? Обратите внимание, что я не могу дать ни самому внутреннему div, ни его родителю определенное height значение, так как в приложении, над которым я работаю, количество других членов flexbox может варьироваться.

Примечание: я попробовал несколько предложений из других ответов, таких как установка всех элементов иметь min-height:0 вместо auto, или обеспечение того, чтобы flex-basis было установлено в 0, но ни один из них не сработал. См.



Http://plnkr.co/edit/UBRcrNmR5iDbn3EXu6FI?p=preview



Для примера, иллюстрирующего эту проблему. (div с идентификатором heres-the-problem - это тот, высота которого я хочу ограничить высотой его родителя.)

597   1  

1 ответ:

Во-первых, давайте разберемся с терминологией:

...как заставить элемент, вложенный в элемент flexbox (под" элементом flexbox " я подразумеваю дочерний элемент элемента, стилизованного под display:flex), ограничить его размер размером элемента flexbox, под которым он вложен?

Элемент с display: flex называетсяFlex container (технически) илиFlex parent (разговорно).

Дочерние элементы контейнера flex называются гибкие элементы . Обратите внимание на слово дети (Первый уровень). Потомки контейнера flex за пределами дочерних элементов не являются элементами flex, и большинство свойств flex к ним неприменимы.

теперь, обращаясь к вашему вопросу:

Проблема в том, что Firefox (и, по-видимому, IE11) имеют иную интерпретацию правила процентной высоты, чем Chrome.

В частности, вертикальная полоса прокрутки, которую вы хотите, не отображается в Chrome, потому что вы используете процентные высоты способом, который не соответствует традиционной реализации спецификации .

CSS height свойство

Процентное соотношение
задает высоту в процентах. Процент рассчитывается по отношению к высоте блока, содержащего сгенерированный блок. Если высота содержащего блока не задана явно и этот элемент не позиционирован абсолютно, то значение вычисляется следующим образом: "авто".

Авто
высота зависит от значений других свойств.

Другими словами, если вы хотите, чтобы элемент имел процентную высоту, то вы должны указать высоту содержащего блока (т. е. родительского).

В вашем коде body (Уровень 1) имеет height: 100vh.

На один уровень ниже, .max-flex (Уровень 2) имеет height: 100%.

Четырьмя уровнями ниже, .large-nested-div (Уровень 4) имеет height: 100%.

Однако на .variable-flex-content (Уровень 3) нет height собственность. Вы определяете высоту с помощью flex: 1 1 0. Что касается Chrome, то это недостающее звено в цепи и нарушение спецификации. Chrome ожидает увидеть свойство height, а когда этого не происходит, он вычисляет высоту до auto.

Chrome vs Firefox (я не тестировал IE11, поэтому не буду упоминать об этом здесь)

Традиционно при вычислении процентных высот браузеры интерпретировали использование спецификации термина "высота" как означающее значение свойства height. Его можно было бы так же легко интерпретировать как высоту (общий термин), но требование свойства height стало преобладающей реализацией. Я никогда не видел, чтобы min-height или max-height работали на родителя, когда дело касается процентных высот.

Однако в последнее время, как отмечалось в этом вопросе и еще в одном и еще в одном, Firefox расширил свою интерпретацию, приняв также высоты flex.

Непонятно, какой браузер более уступчив.

Не имеет значения, что определение свойстваheight не обновлялось с 1998 года (CSS2 ).

Решение Проблемы

Вместо определения высоты .variable-flex-content с помощью flex: 1 1 0% попробуйте использовать height: 100% или height: calc(100% - 60px) или абсолютное позиционирование.

5  
2017-05-23 15:25:36

Comments

    Ничего не найдено.
Click here to cancel reply.