如果一行中没有足够的空间，将 flex-direction 切换到列

Question

在下面的例子中，我要的是有.inner-flexbox有flex-direction: row;当它的子元素可以容纳在同一行上，但切换到flex-direction: column;时他们不能。我不认为媒体查询是我在这里想要的，因为我会根据视口宽度是大于还是小于一行中所有<div>s.inner-flexbox的宽度加上<aside>. 基本上，我不希望项目内.inner-flexbox包装——我希望它们全部在一行中，或者全部在一列中。

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

.outer-wrapper
{
    display:flex;
    width: 100%;
    height: auto;
    background-color: gray;
    flex-wrap: nowrap;
}

.inner-flexbox
{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

.inner-flexbox > div
{
    width: 10rem;
    height: 10rem;
    background-color: salmon;
    margin: 10px;
}

aside
{
    background-color: blue;
    width: 15rem;
    height: 15rem;
}

<div class="outer-wrapper">
  <div class="inner-flexbox">
    <div>Block 1</div>
    <div>Block 2</div>
    <div>Block 3</div>
  </div>
  <aside><!-- Other content here --></aside>
</div>

Answer 1

最后，正如 @LGSon 所建议的那样，我求助于脚本。我使用 jQuery 将内部 Flexbox 的总宽度与容器的宽度减去其旁边的项目的宽度进行比较。