柔性盒。兩列，一個以最小的寬度

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>

我希望我的第二列無休止地伸展，而是縮小到一定的寬度。 我試圖使用最小值的寬度，但它does not工作。 似乎我可以用flexbox本身來做...

Answer 1

Set .main to flex：1 0 200px。

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

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