Почему дивы в flex-контейнере не растягиваются в высоту?
В конструкторе https://basicweb.ru/css/flexbox_generator.php дивы растягиваются в высоту, но этот же код в песочнице https://codepen.io/valera10/pen/yLQJJWa не работает. Что не так?
Код:
HTML
<div id='flex-container'> <div>1</div><div>2</div> </div> |
<div id='flex-container'> <div>1</div><div>2</div> </div>
CSS
* {box-sizing: border-box; } #flex-container {background: rgb(0, 150, 208); display: flex; height: 100%; flex-wrap: wrap; } #flex-container > div {background: rgb(241, 101, 41); border: 1px solid; width: 100%; } #flex-container > div:nth-of-type(1) {align-self: stretch; width: 10%; } #flex-container > div:nth-of-type(2) {width: 90%; } |
* {box-sizing: border-box; } #flex-container {background: rgb(0, 150, 208); display: flex; height: 100%; flex-wrap: wrap; } #flex-container > div {background: rgb(241, 101, 41); border: 1px solid; width: 100%; } #flex-container > div:nth-of-type(1) {align-self: stretch; width: 10%; } #flex-container > div:nth-of-type(2) {width: 90%; }
Дополнительно:
Помогло:
1. html, body {height: 100%; }
В конструкторе, видимо, это прописано само собой, о чем умалчивается.
2. Вместо 100% указать 100vh
Ответы:
задай вытосу контейнера #flex-container в px а не в процентах
- Это понятно.
Вопрос о другом: почему там работает, а тут - нет?Уже не говоря о том - зачем мне пиксели, если мне надо растянуть блоки на высоту страницы.
Верстка адаптивная. Тогда уж не явно пиксели ставить надо, а функцию вычисления высоты... - Vadim Rublev, 100vh - высота окна браузера. и не потребуются извраты с html, body {height: 100%; }
- Работает. Спасибо!
Но ведь 100% это тоже самое, почему не работает с процентами, интересно.
- Vadim Rublev,
1. В вопросе надо было бы уточнить, что тебе нужно на всю высоту страницы а не как в примере
2. В примере задана конкретная высота в пикселях для контейнера - это и есть ответ на твой вопрос - > В примере задана конкретная высота в пикселях для контейнера
Где это? По коду, который тут (в кодпене уже изменено).
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Проблема с растягиванием дивов в flex-контейнере может возникать из-за нескольких возможных причин. Вот несколько вариантов решения этой проблемы:
1. Убедитесь, что у flex-контейнера установлены правильные свойства flex-direction и flex-wrap. Например, если вы хотите, чтобы дивы растягивались в высоту, убедитесь, что flex-direction установлен на "column".
2. Проверьте, что у дивов внутри flex-контейнера правильно установлены свойства flex-grow, flex-shrink и flex-basis. Например, если вы хотите, чтобы дивы растягивались в высоту, установите flex-grow на значение больше 0 для этих дивов.
3. Проверьте, что у flex-контейнера установлено свойство align-items на "stretch". Это позволит дивам растянуться по высоте контейнера.
Приведу пример кода на языке PHP, который демонстрирует правильное использование flex-контейнера:
<div style="flex-direction: column;align-items: stretch"> <div style="flex-grow: 1">Див 1</div> <div style="flex-grow: 1">Див 2</div> <div style="flex-grow: 1">Див 3</div> </div>
Если после применения этих рекомендаций проблема с растягиванием дивов в flex-контейнере всё ещё не решена, пожалуйста, уточните дополнительные детали или предоставьте код для более детального анализа.