Flex is not that Flex any solution → justify-content:space-between and full nested item flexibility doesn't coexist

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 → click here even if you delete this part →

<aside class="main-sidebar col">

the main content doesn't takes full width. whats wrong?

I tried one remedial solution →

I remove the width from

.flex-main and used flex:1 0 68.8%, but this created the issue too. This destroyed → .content{justify-content:space-between;}

I believe that there should be some solution. Any suggestions?

BACKGROUND → 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 →

margin-right: 20px;

the flip becomes very challenging and it's not that smooth.

the idea was flip orders, and thus flip columns i.e. order:1 should be changed to order:2 and vice-versa while this property .content{justify-content:space-between;} always ensures the gap between the two columns. Does this all make sense?

here is the codepen →

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 → .content{justify-content:space-between;}

Everything sounds ok till now? Make sense? are we on the same page? now try deleting the →

`   <aside class="main-sidebar col">

    </aside>`

flex-main doesn't expand thats the issue, and I am sure their won't be an easy fix for this.

VIDEO EXPLANATION [In the video order filling is mistyped it's actually order filliping.]

Solution

if to delete the main-sidebar col, the flex-main doesn't expand, which is the issue, and I am sure their won't be an easy fix for this

There is a really simple solution for that. If you add .flex-main:only-child { flex: 1; } to your CSS rules, it will work how you want.

So basically what happens here is, when you delete the main-sidebar the :only-child selector will kick in.

Updated codepen

Here is 2 snippets, with same CSS, the first with .main-sidebar...

.content {
  display:flex;
  height: 100vh;
  justify-content:space-between;
}

.flex-main {
	width:68.8%;
	order:2;
  background: blue;
}
.flex-main:only-child {
  flex: 1;
}

.main-sidebar {
	/*background: #323232;*/
	background: #ffffff;
	width: 29%;
	color:black;
	order:1;
  background: yellow;

}

<div class="content">
    <div class="flex-main">
        <div class="main col">
        </div>        
    </div>
    <aside class="main-sidebar col">
      
    </aside>
</div>

...the second without .main-sidebar

.content {
  display:flex;
  height: 100vh;
  justify-content:space-between;
}

.flex-main {
	width:68.8%;
	order:2;
  background: blue;
}
.flex-main:only-child {
  flex: 1;
}

.main-sidebar {
	/*background: #323232;*/
	background: #ffffff;
	width: 29%;
	color:black;
	order:1;
  background: yellow;

}

<div class="content">
    <div class="flex-main">
        <div class="main col">
        </div>        
    </div>
</div>