是否可以在不拉伸另一根柔性线的情况下使一根柔性线拉伸？

Question

我正在尝试实现一个响应式边栏，当没有足够的水平空间时，该边栏将更改为固定高度的标题。

以下代码可以正常工作，除了我无法使第二条柔性线拉伸并占用最大空间，而又给第一行提供所需的最小空间。

根据规范（https://www.w3.org/TR/css-flexbox-1/#flex-lines）：

  

在多行flex容器中（甚至是只有一行的容器），每行的交叉尺寸是在该行上包含flex项所需的最小尺寸（由于align-self对齐后），并且这些行通过align-content属性在flex容器中对齐。

但是我似乎缺少了一些东西，因为可用的垂直线似乎由柔性线平均分配。

我尝试给.bar min-hieght: 5em，但是包裹时它仍然占据高度的一半。

是否不使用媒体查询就无法实现？

---

代码：

body {
  background: yellow;
  color: white;

  margin: 0;
  padding: 0;

  position: absolute;
  width: 100%;
  min-height: 100%;

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.bar {
  background: grey;

  margin: 0;
  padding: 1em;

  min-width: 15em;
  min-height: 5em;

  flex-grow: 1;
}

.content {
  background: darkgrey;

  margin: 0;
  padding: 1em;

  flex-grow: 999;
  flex-shrink: 1;
  flex-basis: 40em;
}

<aside class="bar">
  <h1>Bar</h1>
</aside>
<main class="content">
  <h1>Content</h1>
</main>

JsFiddle：https://jsfiddle.net/074r8nhs/31/