#html #css #flexbox
Вопрос:
У меня есть контейнер flexbox для столбцов. Я могу растянуть одного из детей flexbox, но я могу найти, как растянуть его детей. См. Пример ( .flex-child-2-child и .flex-child-2-child-child должен растягиваться вертикально для заполнения .flex-child-2 ) :
body { display: flex; min-height: 100vh; flex-direction: column; border: 4px solid green; } .flex-child-1 { width: 100px; background-color: SteelBlue; } .flex-child-2 { flex: 1; background-color: LightSeaGreen; } .flex-child-2-child-child, .flex-child-2-child { height: 100%; } .flex-child-2-child-child { background-color: Tomato; display: flex; width: 100%; } .flex-child-2-child-child gt; div { flex: 0 1 auto; border: 1px solid yellow; height: 100%; width: 100px; } .flex-child-2-child-child gt; div div { flex: 1; } lt;div class="flex-child flex-child-1"gt; Test lt;/divgt; lt;div class="flex-child flex-child-2"gt; lt;div class="flex-child-2-child"gt; lt;div class="flex-child-2-child-child"gt; lt;divgt;Hellolt;/divgt; lt;divgt;Word!lt;/divgt; lt;/divgt; lt;/divgt; lt;/divgt; Я мог бы использовать height вместо min-height вкл body ., но тогда длинный контент переполнялся бы из body
body { display: flex; height: 100vh; flex-direction: column; border: 3px solid green; } .flex-child-1 { width: 100px; background-color: SteelBlue; } .flex-child-2 { flex: 1; background-color: LightSeaGreen; } .flex-child-2-child-child, .flex-child-2-child { height: 100%; } .flex-child-2-child-child { background-color: Tomato; display: flex; } .flex-child-2-child-childgt;div { flex: 0 1 auto; border: 1px solid yellow; width: 100px; } .flex-child-2-child-childgt;div div { flex: 1; } lt;div class="flex-child flex-child-1"gt; Test lt;/divgt; lt;div class="flex-child flex-child-2"gt; lt;div class="flex-child-2-child"gt; lt;div class="flex-child-2-child-child"gt; lt;divgt;Hellolt;/divgt; lt;divgt;Word! lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;pgt;.lt;/pgt; lt;/divgt; lt;/divgt; lt;/divgt; lt;/divgt; Ответ №1:
Добавить flex: 1; display: flex; flex-direction: column; к .flex-child-2
И
display: flex; flex-direction: column; flex: 1; .flex-child-2-child-child, .flex-child-2-child чтобы растянуть элементы
body { display: flex; min-height: 100vh; flex-direction: column; } .flex-child-1 { width: 100px; background-color: SteelBlue; } .flex-child-2 { flex: 1; background-color: LightSeaGreen; display: flex; flex-direction: column; } .flex-child-2-child-child, .flex-child-2-child { /* height: 100%; */ display: flex; flex-direction: column; flex: 1; } .flex-child-2-child-child { background-color: Tomato; } lt;div class="flex-child flex-child-1"gt; Test lt;/divgt; lt;div class="flex-child flex-child-2"gt; lt;div class="flex-child-2-child"gt; lt;div class="flex-child-2-child-child"gt; Hello Word! lt;/divgt; lt;/divgt; lt;/divgt; Комментарии:
1. Проблема, с которой я столкнулся , заключается в том, что в заключительном проекте у одного из детей уже есть
display:flex; flex-direction: row, я редактирую свой вопрос, чтобы отразить его.2. Пожалуйста, обновите вопросы в соответствии со сценарием реальной проблемы, чтобы это можно было проверить.
3. Все готово, я отредактировал его
4. Хорошо, «дочерний элемент строки flexbox» должен получить только дополнительный
flex: 1, и это работает.5. Пожалуйста, одобрите ansr, если это работает для вас.