title: Flex is not that Flex any solution → justify-content:space-between and full nested item flexibility doesn't coexist
body: <p>I think even if we have dedicated 33% to a nested flex item and 67%, for example, but if the other item is not available then the item in discussion takes 100%, but see here → <a href="http://codepen.trafficopedia.com/site01/the-authors-name-post-copy/" rel="nofollow noreferrer">click here</a> even if you delete this part →</p>
  
  <pre><code>&lt;aside class="main-sidebar col"&gt;
  </code></pre>
  
  <p>the main content doesn't takes full width. whats wrong?</p>
  
  <p>I tried one remedial solution → </p>
  
  <p>I remove the width from </p>
  
  <p><code>.flex-main</code> and used <code>flex:1 0 68.8%</code>, but this created the issue too. This destroyed → <code>.content{justify-content:space-between;}</code></p>
  
  <p>I believe that there should be some solution. Any suggestions?</p>
  
  <p><strong>BACKGROUND →</strong>
  The reason I choose flex is because this is a WordPress website. It often is required in WordPress that we can flip the two columns i.e. main content area and the sidebar, but when we use rigid CSS like this → </p>
  
  <pre><code>margin-right: 20px;
  </code></pre>
  
  <p>the flip becomes very challenging and it's not that smooth.</p>
  
  <p>the idea was flip orders, and thus flip columns i.e. <code>order:1</code> should be changed to <code>order:2</code> and vice-versa while this property <code>.content{justify-content:space-between;}</code> always ensures the gap between the two columns. <strong>Does this all make sense?</strong></p>
  
  <p><a href="https://codepen.io/codeispoetry/pen/ybxGap" rel="nofollow noreferrer">here is the codepen →</a></p>
  
  <p>Now just change the orders and you will how easy and smooth the flipping are just by reversing the order and while we do this the gap is also maintained because of this → 
  <code>.content{justify-content:space-between;}</code></p>
  
  <p>Everything sounds ok till now? Make sense? are we on the same page?
  now try deleting the →</p>
  
  <pre><code>`   &lt;aside class="main-sidebar col"&gt;
  
      &lt;/aside&gt;`
  </code></pre>
  
  <p><code>flex-main</code> doesn't expand thats the issue, and <strong>I am sure their won't be an easy fix for this.</strong></p>
  
  <p><em><a href="https://www.screencast.com/t/3ehrtWQ47Q" rel="nofollow noreferrer">VIDEO EXPLANATION</a></em> [In the video order filling is mistyped it's actually order filliping.]</p>