Ведение ребенка DIV с расширяя Flexbox DIV

Question

Ну, вот на этой скрипке у меня есть две дивы, выровненные с display:flex и flex-grow: https://jsfiddle.net/h7bm23ts/2/

window.longer = function() { 
 
    document.getElementsByClassName("child2")[0].innerHTML += "like this and "; 
 
};

* { 
 
    font-family: sans-serif; 
 
} 
 

 
.wrapper { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
} 
 

 
.box1 { 
 
    background-color: beige; 
 
    height: 300px; 
 
    flex-grow: 2; 
 
} 
 

 
.box2 { 
 
    background-color: cyan; 
 
    height: 300px; 
 
    flex-grow: 1; 
 
} 
 

 
.child1 { 
 
    background-color: green; 
 
} 
 

 
.child2 { 
 
    background-color: gray; 
 
}

<div class="wrapper"> 
 
    <div class="box1"> 
 
    some nonsense 
 
    </div> 
 
    <div class="box2"> 
 
    longer nonsense <button onclick="window.longer();"> even longer </button> 
 
    <div class="child1"> 
 
    this child should be able to expand this div 
 
    </div> 
 
    <div class="child2"> 
 
    this child should wrap when too much content is appended 
 
    </div> 
 
    </div> 
 
</div>

Однако содержание в одном из divs является динамическим, и когда на дочерний div его добавляется больше содержимого, родительский div расширяется и блокирует коробки, разрушая макет с помощью нескольких щелчков мыши.

Как заставить серый div расширяться на большее количество контента и заставить его просто принять ширину своего родителя как «строгого» и обернуть его?

EDIT: Я обосновался на https://jsfiddle.net/h7bm23ts/12/.

Answer 1

Попробуйте CSS для того чтобы достигнуть того, что вам нужно:

.wrapper { 
    display: flex; 
    flex-direction: row; 
    flex-wrap: nowrap; 
} 

.box1 { 
    background-color: beige; 
    min-height: 300px; 
    flex: 2 1 0; /* 2 - flex grow, 1 - flex shrink, 0 - flex basis */      

} 

.box2 { 
    background-color: cyan; 
    min-height: 300px; 
    flex: 1 0 0; 
} 

Более подробно об этом Вы можете найти здесь: https://css-tricks.com/flex-grow-is-weird/ и здесь: https://drafts.csswg.org/css-flexbox/#flex-grow-property и https://drafts.csswg.org/css-flexbox/#flexibility