Как запретить тексту увеличивать размер flex-элемента?

Question

[HomerDoh]

Вот код:



Как запретить тексту в item2 увеличивать flex-контейнер? word-break: break-all; не подходит, т.к. начинают криво переносится все слова, а не только длинные.

Comments

[Aetae]

overflow: hidden;?

Answer 1

[Виталий Першин]

min-width: 0; добавить к item2

Answer 2

[HomerDoh]

На вопрос уже ответил Виталий Першин @Get-Web. Если добавить к item2 — min-width: 0;, текст не будет увеличивать размер flex-элемента.

Как это работает

Не смотря на то, что значение свойства min-width по умолчанию равно 0, для flex-элементов оно по умолчанию равно auto => блок будет растягиваться.

Источник

Answer 3

[Артём Ведищев]

А так пробовали?

.item2 {
flex-grow: 1;
background-color: #1cf;
word-wrap: break-word;
max-width: 100px;
}

Answer 4

[Gias]

element.style {
word-break: break-all;
}

Где всё сложно с переносами строк