Html 如果有'；It’一行的空间不够

在下面的示例中，我想要的是拥有

。内部flexbox

拥有

柔性方向：行当其子元素可以放在一行上，但切换到
flex-direction:column时当他们不能的时候。我不认为媒体查询是我在这里想要的，因为我将基于视口宽度是否大于或小于
.inner flexbox
中所有
的宽度加上
的宽度。基本上，我不希望项目在
.inner flexbox
包装中，我希望它们全部在一行中，或者全部在一列中

（示例）：我有一个包含两个项目的flexbox。一个是“普通”元素，另一个是flexbox


。外包装器
{
显示器：flex；
宽度：100%；
高度：自动；
背景颜色：灰色；
柔性包装：nowrap；
}
.内曲轴箱
{
显示器：flex；
柔性包装：包装；
弯曲方向：行；
}
.内部flexbox>div
{
宽度：10雷姆；
高度：10雷姆；
背景颜色：鲑鱼；
利润率：10px；
}
在一边
{
背景颜色：蓝色；
宽度：15雷姆；
高度：15雷姆；
}

第一区
第2区
第3区
试试这段代码


。外包装器{
显示器：flex；
宽度：100%；
高度：自动；
背景颜色：灰色；
柔性包装：nowrap；
}
.内曲轴箱{
宽度：75%；
显示器：flex；
柔性包装：包装；
弯曲方向：行；
柔性流：行换行；
证明内容：之间的空间；
}
.内部flexbox>div{
宽度：10雷姆；
高度：10雷姆；
背景颜色：鲑鱼；
利润率：10px；
}
旁白{
宽度：25%；
背景颜色：蓝色；
宽度：15雷姆；
高度：15雷姆；
浮动：对；
显示：块；
}

第一区
第2区
第3区
最后，我求助于脚本，正如@LGSon所建议的那样。我使用jQuery将内部flexbox的总宽度与容器的宽度减去旁边项目的宽度进行比较。
媒体查询在这里是有意义的，因为您不需要包装，您需要从水平方向立即切换到垂直方向。是否有适合这些目的的媒体查询？如果是这样的话，我愿意接受这个想法。@Michael_B只要你知道物品的宽度，这个方法就行。这可能会很快变得复杂，尤其是当你开始更改内容，并且项目的宽度不再相同时。从我的问题来看：“我不认为媒体查询是我想要的，因为我会根据视口宽度是否大于或小于一行中所有s in.inner flexbox的宽度加上的宽度来进行查询。”@Michael_B我忘了在我的示例中给出宽度a，但当我将它添加到您的示例中并添加flex shrink:0；为了防止它被压扁，媒体质询被分开了。无论如何谢谢。对不起，也许我不清楚。我不希望内部flexbox中的项目被包装。我希望它们要么全部在一行中，要么全部在一列中。如果行布局中没有足够的空间，则内部flexbox中的项目应仅位于列中。