Flexbox. Zwei Spalten, eine mit minimaler Breite

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>

Ich möchte meine zweite Säule endlos dehnen, sondern schrumpfen zu einer bestimmten Breite. Ich habe versucht, einen Mindestwert für die Breite zu verwenden, aber es funktioniert nicht. Scheint wie ich es mit Flexbox Properties tun kann ...

Answer 1

Set .main zu flex: 1 0 200px.

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

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