У меня есть 4 столбца flexbox, и все работает нормально, но когда я добавляю некоторый текст в столбец и устанавливаю для него большой размер шрифта, столбец становится шире, чем должен быть из-за свойства flex.
Я попытался использовать, word-break: break-word
и это помогло, но все же, когда я изменяю размер столбца до очень маленькой ширины, буквы в тексте разбиваются на несколько строк (по одной букве в строке), и все же столбец не получает ширину меньше размера одной буквы ,
Посмотрите это видео (в начале первый столбец самый маленький, но когда я изменил размеры окна, это самый широкий столбец. Я просто хочу всегда соблюдать параметры flex; размеры flex 1: 3: 4: 4)
Я знаю, что установка размера шрифта и отступов столбцов на меньшие поможет ... но есть ли другое решение?
Я не могу использовать overflow-x: hidden
.
.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
}
<div class="container">
<div class="col col1">Lorem ipsum dolor</div>
<div class="col col2">Lorem ipsum dolor</div>
<div class="col col3">Lorem ipsum dolor</div>
<div class="col col4">Lorem ipsum dolor</div>
</div>
min-width
но не совсем уверен во всех деталях.min-height: 0;
. Мне пришлось попробовать установить это для нескольких более высоких элементов в дереве.min-height: 0;
в ike 10 мест, чтобы заставить его работать. Спасибо, спасибо, большое спасибо за отличный совет!