Почему гибкие элементы не уменьшаются до размера содержимого? ⇐ Html

[Anonymous]

У меня есть 4 столбца flexbox, и все работает нормально, но когда я добавляю текст в столбец и устанавливаю для него большой размер шрифта, столбец становится шире, чем должен быть из-за свойства flex.

Я пытался использовать word-break:break-word, и это помогло, но все равно, когда я изменяю размер столбца до очень маленькой ширины, буквы в тексте разбиваются на несколько строк (по одной букве в строке), но столбец не становится меньше ширина больше одного размера буквы.

Посмотрите это видео
(в начале первый столбец самый маленький, но когда я изменил размер окна, это самый широкий столбец. Я просто хочу всегда соблюдать гибкие настройки; гибкие размеры 1 : 3 : 4 : 4)

Я знаю, что установка меньшего размера шрифта и заполнения столбца поможет... но есть ли другое решение?

Я не могу использовать overflow-x: скрытый.

JSFiddle

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

.container {
display: flex;
width: 100%
}
.col {
min-height: 200px;
padding: 30px;
word-break: break-word
}
.col1 {
flex: 1;
background: orange;
font-size: 80px
}
.col2 {
flex: 3;
background: yellow
}
.col3 {
flex: 4;
background: skyblue
}
.col4 {
flex: 4;
background: red
}

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

Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor

Подробнее здесь: https://stackoverflow.com/questions/362 ... ntent-size