在右div移至底部之前调整左div的大小

Question

我有两个水平对齐的div（display设置为inline-block）。调整浏览器大小时，我希望左div在右div移动到其下方之前先调整大小。

我尝试设置width，min-width和max-width，以及使用media queries。似乎什么都没用。

Here's a picture of what I want to achieve

<div class="left">
    COTENT
</div>
<div class="right">
    CONTENT
</div>

body {
    margin: 66px auto 24px auto;
    max-width: 900px;
    background: rgba(200, 200, 200, 0.4);
}

.left {
    display: inline-block;
    max-width: 594px;
    min-width: 300px;
    margin-right: 6px;
}


.right {
    width: 290px;
    min-width: 290px;
    display: inline-block;
    vertical-align: top;
    margin-left: 6px;
}

Answer 1

您可以尝试以下方式：

.left {
    width: calc(100% - 290px);
}

为避免将右边的div跳到下一行，请将其包装为具有flex样式的div（.container）：

.container {
  display: flex;
}

这里的代码：https://jsfiddle.net/8utdg4qb/