Javascript 如果可能的话，将div放入空白处，否则会变大

我的问题相当复杂

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

如果我的30%栏高于70%栏，“challengeblock”应填充在右侧。 如果右侧是较高的一侧，“challengeblock”应位于底部，宽度为100%

我举了一个例子：

https://jsfiddle.net/by6tkg7L/

绿色的应该放在代码的右边

我试过了

flex-grow

在本例中，还尝试了grid（在那里没有经验，因此我需要先阅读更多）

我也对masonary的布局持开放态度，比如同位素，但到目前为止，我还没有找到办法让它填充或者让它依靠其他部分生长

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

---

Tahnks提前

Css唯一的解决方案。工作小提琴：

为了能够看到它工作，您必须更改蓝色块的高度（class。right\u top）

我只修改了css，我在子元素上使用了

block

和

inline block

（带

float:left

），并且我只在问题元素上设置了

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;
}

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

HTML:

.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;
}

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

您可以将您的JSFIDLE代码发布到问题中吗。这个问题必须是独立的。谢谢，谢谢，这正是我想要的