フレックスボックス。二つの列、最小限の幅の1

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>

は、私は私の2番目の列が延々とストレッチしたいが、一定の幅に縮小します。 幅の最小値を使用しようとしましたが、動作しません。 私はフレックスボックスの特性でそれをすることができるようです...

Answer 1

セットをフレックス：1 0 200px。延々と

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

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