Css 防止子div扩展flexbox div

好的，在这把小提琴上，我有两个与

display对齐的div:flex

和

flex-grow

：

window.longer=function（）{
document.getElementsByClassName（“child2”）[0].innerHTML+=“像这样”和“；
};
*{
字体系列：无衬线；
}
.包装纸{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
}
.box1{
背景颜色：米色；
高度：300px；
柔性生长：2；
}
.box2{
背景色：青色；
高度：300px；
柔性生长：1；
}
.儿童1{
背景颜色：绿色；
}
.儿童2{
背景颜色：灰色；
}

胡说八道
更长的胡说八道甚至更长
这个孩子应该能够扩展这个div
当附加太多内容时，此子项应换行
尝试使用此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;
}

您可以在此处找到更多关于此的信息：
这里：，和
如何从容器中移除
flex-wrap:wrap
？还不完全清楚你想做什么。如果米色div不允许收缩，则它必须具有定义的大小<代码>flex grow:2还不够。类似这样的情况-@Michael_B:青色div仍然将米色div推到左侧，一点之后，米色div中的内容将难以辨认。人们实际上已经建议过两次了。@Paulie_D:如果我要给米色沙发定一个尺寸，那么使用flexbox有什么意义？我想要的是，灰色分区应该接受其父分区的宽度，就像“屏幕大小”一样，并且永远不要尝试将其变大。你不能这样做……flexbox不能解决所有问题。你想要一个米色分区的最小宽度，所以你必须以某种方式设置它。答案是向上投票。这对我帮助很大，但这并不是我问题的确切答案，因为我只希望
.box2
的绿色孩子能长出它，而不是灰色孩子。