title: How to make side menu with flexbox?
body: <p>I need to make the pink element at the left and all the other needs to be right side <code>width: calc(100% - 250px)</code> just like the image shows</p>
  
  <p><a href="https://i.stack.imgur.com/rumSy.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rumSy.jpg" alt="enter image description here"></a></p>
  
  <p><strong>The reason why I use <code>display: flex</code> I need to use <code>order</code> for mobile and tablet devices</strong>. I have been trying with the properties of <code>flex-basis</code> but unfortunately none my tricks are not working </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html {
    height: 100%;
  }
  body {
    margin: 0;
    min-height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
  }
  body &gt; * {
    box-sizing: border-box;
    -webkit-box-flex: 1;
    -webkit-flex: 1 calc(100% - 250px);
    -ms-flex: 1 calc(100% - 250px);
    flex: 1 calc(100% - 250px);
    padding: 10px;
  }
  header {
    background: tomato;
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2;
  }
  section {
    text-align: left;
    background: deepskyblue;
    -webkit-box-ordinal-group: 4;
    -webkit-order: 3;
    -ms-flex-order: 3;
    order: 3;
  }
  aside {
    background: hotpink;
    -webkit-box-flex: 1;
    -webkit-flex: 1 250px;
    -ms-flex: 1 250px;
    flex: 1 250px;
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
  }
  footer {
    background: lightgreen;
    ordeR: 4;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam provident at, itaque ea quia. Quaerat accusamus ex reprehenderit harum nulla quis ipsam maxime necessitatibus atque cupiditate quidem, earum laborum pariatur&lt;/header&gt;
  &lt;aside&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, minima excepturi asperiores delectus eaque eligendi, aliquam quos itaque. Eligendi ipsum sapiente inventore, unde consectetur quos aliquam iure ipsam fugit ratione.&lt;/aside&gt;
  &lt;section&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, modi quis vel tempora assumenda corporis quaerat at pariatur suscipit dolores eveniet, delectus deleniti quisquam. Nisi minus, voluptate repudiandae modi laboriosam&lt;/section&gt;
  &lt;footer&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit at placeat voluptate distinctio atque aliquam et enim, quam, laudantium, velit molestias earum culpa ipsam. Deleniti totam natus saepe distinctio officia.&lt;/footer&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Demo: <a href="https://jsfiddle.net/20fet497/" rel="nofollow noreferrer">https://jsfiddle.net/20fet497/</a></p>