html - flex 盒。两列，其中一列宽度最小

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>

我希望我的第二列无限拉伸(stretch)，但收缩到一定宽度。我尝试使用宽度的最小值，但它不起作用。似乎我可以使用 Flexbox 属性来做到这一点...

Answer 1

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

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

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