如果可能，使 div 适合空白，否则会增大

Question

我的问题比较复杂。

在我的布局中，我有一个左栏和一个右栏。例如 30% 和 70% 宽度。在它们下面还有另一个项目，现在是挑战：

如果我的 30% 列高于 70% 列，则“挑战块”应填写在右侧。 如果右侧较高，则“挑战块”应位于底部，宽度为 100%。

这里我做了一个例子：

https://jsfiddle.net/by6tkg7L/

绿色的应该适合此代码的右侧。

我试过了

flex-grow

在这种情况下，还尝试了网格（没有经验，所以似乎我需要先阅读更多内容）

我也对同位素等砖石布局持开放态度，但到目前为止还没有办法让它填满或让它根据其余部分增长。

我当然更喜欢纯 CSS 的方式，并希望避免使用 JS 进行计算。

提前解决

Answer 1

只有 Css 的解决方案。工作小提琴：https://jsfiddle.net/by6tkg7L/1/

为了能够看到它的工作，您必须更改蓝色块的高度（类 .right_top）。

我只修改了 css，我在子元素上使用了 block 和 inline-block（使用 float: left）并且我只在 question 元素上设置了 flex min-width 和 max-width 而不是静态的 width。

CSS：

.wrapper{
    display: block;
    width: 100%;
    flex-wrap: wrap;
    flex-direction: row;
}
.left{
    background-color: red;
    height: 500px;
    width: 30%;
    display:inline-block;
    float:left;
}
.right_top{
    background-color: blue;
    height: 500px;
    width: 70%;
    display:inline-block;
    float:left;
}
.question{
    min-width: 70%;
    width: auto;
    max-width: 100%;
    background-color: green;
    height: 300px;
    display:flex;
}

HTML：

<div class="wrapper">
    <div class="left">
    </div>
    <div class="right_top">
        </div>
    <div class="question">
    </div>
</div>