Flexbox 1 column to 2 columns, no media queries

flexbox-1-column-to-2-columns-no-media-queries.markdown

Flexbox 1 column to 2 columns, no media queries

A Pen by Snugug on CodePen.

License.

index.html

<div class="container">
  <div class="left-item">Left</div>
  <div class="right-item">Right</div>
</div>

style.scss

* {
  box-sizing: border-box;
}

.container {
  display: flex;
  // Wrap if everything can't fit in one line
  flex-wrap: wrap;
  border: 1px solid black;
}

// left-item and right-item's total width (flex-basis as width for box model) should be <= 100%

.left-item {
  // Grow, don't shrink, aim to be 30% of the available space
  // flex-grow, flex-shrink, flex-basis
  flex: 1 0 30%;
  // Be at least 300px wide. Key for the transition to happen!
  min-width: 300px;
  background: yellow;
   border: 1px solid black;
}

.right-item {
  // Grow, shrink, and aim to be at least 70% of the available space
  flex: 1 1 70%;
  background: orange;
  border: 1px solid black;
}