Сделайте флексбокс детей на 100% ростом их родителей

Question

Сделайте флексбокс детей на 100% ростом их родителей

Я пытаюсь заполнить вертикальное пространство элемента flex внутри flexbox:

.container {
  height: 200px;
  width: 500px;
  display: flex;
  flex-direction: row;
}
.flex-1 {
  width: 100px;
  background-color: blue;
}
.flex-2 {
  position: relative;
  flex: 1;
  background-color: red;
}
.flex-2-child {
  height: 100%;
  width: 100%;
  background-color: green;
}

<div class="container">
  <div class="flex-1"></div>
  <div class="flex-2">
    <div class="flex-2-child"></div>
  </div>
</div>

А вот и JSFiddle

flex-2-child не заполняет требуемую высоту, за исключением двух случаев, когда:

flex-2 имеет высоту 100% (что странно, потому что у гибкого элемента по умолчанию 100% + он глючит в Chrome)
flex-2-child имеет абсолютную позицию, что также неудобно

Это не работает в Chrome или Firefox в настоящее время.

879

css css3 flexbox

Источник

user542642 13 мар '13 в 09:19

14 ответов

Другие вопросы по тегам css css3 flexbox

user122422 08 сен '15 в 20:04 2015-09-08 20:04 · Answer 1 · 2015-09-08 20:04

Как и в случае с ответом Дэвида Стори, моя работа такова:

.flex-2
{
 align-items: stretch;
 display: flex;
}

В качестве альтернативы align-items, ты можешь использовать align-self только на .flex-2-child вещь, которую вы хотите растянуть.

879

Источник

user122422 08 сен '15 в 20:04

user295813 13 мар '13 в 15:29 2013-03-13 15:29 · Answer 2 · 2013-03-13 15:29

Я ответил на аналогичный вопрос здесь.

Я знаю, что вы уже сказали position: absolute; неудобно, но это работает. См. Ниже для получения дополнительной информации об устранении проблемы изменения размера.

Также ознакомьтесь с этим jsFiddle для демонстрации, хотя я добавил только префиксы webkit, открытые в Chrome.

У вас в основном есть 2 вопроса, с которыми я буду иметь дело отдельно.

Заставить ребенка согнуть предмет на 100%
- Задавать position: relative; на родителя ребенка.
- Задавать position: absolute; на ребенка.
- Затем вы можете установить ширину / высоту, как требуется (100% в моем образце).
Исправление прокрутки изменения размера "причуды" в Chrome
- Положил overflow-y: auto; на прокручиваемый div.
- У прокручиваемого элемента div должна быть указана явная высота. Мой образец уже имеет высоту 100%, но если он еще не применен, вы можете указать height: 0;

Посмотрите этот ответ для получения дополнительной информации о проблеме прокрутки.

user530681 27 май '13 в 10:38 2013-05-27 10:38 · Answer 3 · 2013-05-27 10:38

Если я правильно понимаю, вы хотите, чтобы flex-2-child заполнил высоту и ширину своего родителя, чтобы красная область была полностью покрыта зеленым?

Если это так, вам просто нужно установить flex-2 для использования flexbox:

.flex-2 {
    display: flex;  
}

Затем скажите flex-2-child, чтобы он стал гибким:

.flex-2-child {    
    flex: 1;
}

Смотрите http://jsfiddle.net/2ZDuE/10/

Причина в том, что flex-2-child не элемент flexbox, а его родитель.

user3896501 22 май '18 в 18:12 2018-05-22 18:12 · Answer 4 · 2018-05-22 18:12

Я нашел решение самостоятельно, предположим, у вас есть CSS ниже:

.parent {
  align-items: center;
  display: flex;
  justify-content: center;
}

.child {
  height: 100%; <- didn't work
}

В этом случае установка высоты 100% не будет работать, поэтому я настраиваю margin-bottom Правило для auto, лайк:

.child {
  margin-bottom: auto;
}

и ребенок будет выровнен к верхнему из родителей, вы также можете использовать align-self Править в любом случае, если вы предпочитаете.

.child {
  align-self: flex-start;
}

user2533215 18 сен '13 в 08:08 2013-09-18 08:08 · Answer 5 · 2013-09-18 08:08

Я полагаю, что поведение Chrome более соответствует спецификации CSS (хотя и менее интуитивно понятно). Согласно спецификации Flexbox, по умолчанию stretch ценность align-self свойство меняет только используемое значение элемента "свойство поперечного размера" (height, в этом случае). И, как я понимаю спецификацию CSS2.1, процентные высоты рассчитываются из указанного значения родительского height, а не его используемое значение. Указанное значение родительского height не зависит от каких-либо свойств flex и по-прежнему auto,

Установка явного height: 100% делает возможным формально рассчитать процент роста ребенка, как установка height: 100% в html позволяет рассчитать процентную высоту body в CSS2.1.

user587558 02 окт '19 в 21:39 2019-10-02 21:39 · Answer 6 · 2019-10-02 21:39

Это также можно решить с помощью align-self: stretch; на элементе, который мы хотим растянуть.

Иногда желательно растянуть только один элемент в настройке Flexbox.

.container {
  height: 200px;
  width: 500px;
  display: flex;
  flex-direction: row;
}
.flex-1 {
  width: 100px;
  background-color: blue;
}
.flex-2 {
  position: relative;
  flex: 1;
  align-self: stretch;
  background-color: red;
}
.flex-2-child {
  background-color: green;
}

<div class="container">
  <div class="flex-1"></div>
  <div class="flex-2">
    <div class="flex-2-child"></div>
  </div>
</div>

user6429674 20 июл '22 в 16:40 2022-07-20 16:40 · Answer 7 · 2022-07-20 16:40

Другой подход (другой вариант не подходит для моего случая, потому что мне нужно более общее решение, я действительно хочу избежать использованияposition: absoluteпо возможности и только сalign-items: stretchв моем случае не сработает из-за другого сайлинга):

Иметь родителя сdisplay: flex
Дайте вашему элементу отображение гибкости,align-self: stretchиmargin-top: 0+margin-bottom: 0

Минимальный воспроизводимый пример:

user11140571 15 ноя '21 в 19:09 2021-11-15 19:09 · Answer 8 · 2021-11-15 19:09

      .parent {
    display: flex;
}

.child {
    min-height: 100%;
}

6

Источник

user11140571 15 ноя '21 в 19:09

user1540570 17 янв '16 в 11:13 2016-01-17 11:13 · Answer 9 · 2016-01-17 11:13

HTML

<div class="container">
    <div class="flex-1"></div>
    <div class="flex-2">
        <div class="flex-2-child"></div>
    </div>
</div>

CSS

.container {
    height: 200px;
    width: 500px;
    display: -moz-box;
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}
.flex-1 {
   flex:1 0 100px;
    background-color: blue;
}
.flex-2 {
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1 0 100%;
    background-color: red;
}
.flex-2-child {
    flex: 1 0 100%;
    height:100%;
    background-color: green;
}

http://jsfiddle.net/2ZDuE/750/

user985241 13 мар '13 в 09:54 2013-03-13 09:54 · Answer 10 · 2013-03-13 09:54

Идея была бы, что display:flex; с flex-direction: row; заполняет container Div с .flex-1 а также .flex-2, но это не значит, что .flex-2 имеет значение по умолчанию height:100%; даже если он расширен до полной высоты и имеет дочерний элемент (.flex-2-child) с height:100%; вам нужно установить родительский height:100%; или использовать display:flex; с flex-direction: row; на .flex-2 Div тоже.

Из того, что я знаю display:flex не увеличит высоту всех ваших дочерних элементов до 100%.

Небольшая демка, убрана высота с .flex-2-child и использовал display:flex; на .flex-2: http://jsfiddle.net/2ZDuE/3/

user4052701 31 авг '23 в 11:58 2023-08-31 11:58 · Answer 11 · 2023-08-31 11:58

      .parent {
    display: flex;
    align-items: center;
}

.child {
    align-self: stretch;
}

Основываясь на предыдущих ответах, это решение работает для гибких элементов полной высоты.

5

Источник

user4052701 31 авг '23 в 11:58

user2041954 09 фев '21 в 11:17 2021-02-09 11:17 · Answer 12 · 2021-02-09 11:17

забавный факт: высота-100% работает в последнем хром; но не в сафари;

поэтому решение в попутном ветре было бы

"гибкие элементы-растяжка"

https://tailwindcss.com/docs/align-items

и рекурсивно применяться к ребенку ребенка ...

4

Источник

user2041954 09 фев '21 в 11:17

user11003065 13 мар '19 в 05:45 2019-03-13 05:45 · Answer 13 · 2019-03-13 05:45

.container { . . . . align-items: stretch; . . . . }

-8

Источник

user11003065 13 мар '19 в 05:45

user1059966 01 дек '15 в 17:41 2015-12-01 17:41 · Answer 14 · 2015-12-01 17:41

Это мое решение с использованием CSS +

Прежде всего, если первый ребенок (flex-1) должен быть 100px, не должен быть flex. Фактически в css+ вы можете установить гибкие и / или статические элементы (столбцы или строки), и ваш пример станет таким простым:

<div class="container">
  <div class="EXTENDER">
    <div class="COLS">
      <div class="CELL _100px" style="background-color:blue">100px</div>
      <div class="CELL _FLEX" style="background-color:red">flex</div>
    </div>
  </div>
</div>

контейнер css:

.container {
    height: 200px;
    width: 500px;
    position:relative;
}

и, очевидно, включают ядро CSS + 0,2

услышать скрипку