2-column CSS Flexbox layout

2-column-css-flexbox-layout.markdown

2-column CSS Flexbox layout

A Pen by Swati Kothari on CodePen.

License.

index.html

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

style.css

body{
  margin: 0;
  color: #fff;
} 
.wrapper{
  min-height: 100vh;
  background: #ccc;
  display: flex;
  flex-direction: column;
}
.header, .footer{
  height: 50px;
  background: #666;
}
.content {
  flex: 1;
  background: #999;
  display: flex;
  color: #000;
}
.columns{
  display: flex;
   width: 100vw;
}
.main{
  flex: 3;
  background: #eee;
}
.sidebar{
  background: #ccc;
   flex:1;
}