Блог

Я изучаю flexbox и столкнулся со следующей дилеммой: пожалуйста, смотрите код ниже.

Если вы заметили, что .child1 (серое поле) выталкивает .child2 (зеленое поле) вправо от экрана. У .parent есть свойство максимальной ширины (синяя граница), и оно нарушено.

Я хочу, чтобы child1 вырос до максимальной ширины, но когда будет достигнута максимальная ширина, он должен вместо этого обернуть содержимое в child1. Как нам этого добиться?

Установка как child1, так и child2 на увеличение-уменьшение проблематична, потому что я хочу, чтобы child1 занимал максимальную ширину до тех пор, пока не будет достигнута максимальная ширина. (в противном случае оба будут иметь минимальную ширину, если содержимое небольшое)

 .grandParent {  display: flex;  flex-flow: column wrap; } .parent { background: lightred; display: flex; max-width: 300px; border: 1px solid blue; } .child1 {  flex: 1 0 auto;  background: lightgrey; } .child2 {  flex: 0 1 auto;  background: lightgreen; } 

 lt;div class="grandparent"gt; lt;div class="parent"gt; lt;div class="child1"gt;child1 some more text even more text now is hello dlks jflksj dlkfsj dlksdlk flt;/divgt; lt;div class="child2"gt;child2lt;/divgt; lt;/divgt; lt;/divgt;