-1

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.]

WordCent
  • 725
  • 3
  • 18
  • 1
    It is not clear what is not working, so you need to post minimal working code snippet reproducing the issue. One note though, using `flex: 1` will make the element take full space, `flex-basis: 67%` will not. – Asons May 18 '17 at 07:12
  • Can you just wrap the div that has the problematic margin in a container and use padding instead of margin to separate elements? – Hastig Zusammenstellen May 18 '17 at 08:27
  • Please read the question correctly as soon as we bring anything like margin/padding the whole idea of using flex and simplifying the flipping of column will be defied. Try to flip the orders here of the 2 column after you insert your padding/margin. You can do that in the chrome browser here. It is a wordpress website, pasting code is not an easy job. [Live site](http://codepen.trafficopedia.com/site01/the-authors-name-post-copy/) I am replicating the code in the meanwhile. – WordCent May 18 '17 at 08:32
  • I read it a few times and did not understand. I would advise deleting all your question's text and try to sum it up carefully in 3-4 lines of text. – vsync May 18 '17 at 08:56
  • why do you want space-between to occur??? that's the problem. just give the `flex-main` element `flex:1` instead of width and give it an inner padding.. – vsync May 18 '17 at 08:59
  • what do you mean by why i want space betwene 2 columns? thats the design of blogs. Its like I went to the doctor and I said I have tumor in leg. The doctor replied why do you need legs? thats the problem remove the legs. – WordCent May 18 '17 at 09:00
  • In its current form, your question is unclear, as you are using unusual terminology. I personally do not understand what "the flip" means. It's hard to understand what the desired result should be. – tao May 18 '17 at 09:01
  • 1
    @AdiYogi, right now nobody understands your problem, because it is not explained in a way most frontend developers can understand. Use simple logical structures: When doing A I want X. When doing B I want Y... and so on. Try to stick to generally accepted terms, like `display`, `layout`, `position`, `alignment`, `spacing`... When using unusual terms, explain what you mean. What do you mean by "the flip"? – tao May 18 '17 at 09:10

1 Answers1

1

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>
Asons
  • 84,923
  • 12
  • 110
  • 165
  • Oh Yes sir. It seems to work, and yes you are right sir that was the only issue. The orders were changing with no problem, but when I wanted to expand the flex-main to full width after the deletion of the aside it was not changing, but now you made it so easy. Thank you so much.You seems to have 38K reputation that means you have a very high reputation and you are a senior member. If you are a moderator then can you please remove the downvotes? – WordCent May 18 '17 at 12:50
  • 1
    @AdiYogi No, I am not a moderator, so can't change votes...and not so sure a moderator can either, as this is a community driven site and everyone has their own right to vote how they see fit. I did upvote your question though, and hope you will accept mine :) – Asons May 18 '17 at 12:57
  • But trust me it was not an easy fix. I know two authors who have written books on HTML for tuts plus even they could not fix this. You looks like to be some genius with a Midas touch, and you made my day. I was having a headache, after all, that chitchat, but a green tea and your solution and now I am a headache free. I am feeling like dancing and go one beach in the rain. Thank you so much.... – WordCent May 18 '17 at 13:00