Макет Flexbox, позволяющий текстовому полю горизонтально заполнять доступное пространство в гибком столбце [дубликат] ⇐ CSS

[Anonymous]

Я пытаюсь создать макет, показанный ниже, с помощью flexbox. Ширина внешнего элемента div (столбец) определяется самым широким из светло-серых элементов div (номер элемента 1 и ниже), а текст в верхнем элементе div динамически заполняет эту ширину.

Код: Выделить всё

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, ullam.

Item number 1
Item number 2
Item number 3
Item number 4
Item number 5
Item number 6
Item number 7
Item some other text and some more

Стили

Код: Выделить всё

 .flex-column {
display: inline-flex;
flex-direction: column;
padding: 10px;
gap: 5px;
}
.item {
background-color: #e0e0e0;
padding: 5px;
}
.text {
background-color: #c0c0c0;
padding: 5px;
display: flex;
}
.text-inner {
flex-basis: 0;
flex-shrink: 1;
/* flex-grow: 1; */
}

JSFiddle
Помещение текста внутри гибкого элемента div (

Код: Выделить всё

.text-inner

) позволяет использовать гибкую основу. Установка значения 0 вместе с flex-shrink: 1 не позволяет текстовому полю растягивать столбец шире, чем того требуют серые элементы div, но текст сжимается до ширины самого длинного слова, как показано ниже.


Если flex-grow удален из .text-inner, тогда текстовое поле растягивает весь столбец шире, пока текст не окажется в одной строке.
Можно ли этого добиться с помощью flexbox?



Подробнее здесь: https://stackoverflow.com/questions/798 ... e-in-a-fle