柔性盒。两列，一列宽度最小

Question

body{
  margin: 0;
} 
.wrapper{
  min-height: 100vh;
  background: #ccc;
  display: flex;
  flex-direction: column;
}
.header, .footer{
  height: 50px;
  background: #666;
  color: #fff;
}
.content {
  display: flex;
  flex: 1;
  background: #999;
  color: #000; 
}
.columns{
  display: flex;
  flex:1;
}
.main{
  flex: 1;
  order: 2;
  background: #eee;
  min-width: 200px; /*for example*/
}
.sidebar-first{
  width: 20%;
  background: #ccc;
  order: 1;
}

<div class="wrapper">
  <header class="header">Header: Fixed height</header>
  <section class="content">
    <div class="columns">
      <main class="main">Content: Flexible width, but with minimum</main>
      <aside class="sidebar-first">Sidebar first: Fixed width</aside>
    </div>
  </section>
  <footer class="footer">Footer: Fixed height</footer>
</div>

我希望我的第二列无休止地伸展，但缩小到一定的宽度。 我试图使用最小值作为宽度，但它不起作用。 好像我可以用flexbox特性做到这一点......

Answer 1

将.main设置为flex：1 0 200px。

https://codepen.io/anon/pen/OxRozV

.main{
  flex: 1 0 200px;
  order: 2;
  background: #eee;
}