Out of Topic→
Sometimes I feel I should go with CSS logic, but I get stuck at places and have to post for help. Is there any issue in my learning methodology or this is how any technology is, and everyone gets acquainted and develops expertise only through practice and through trial and error?
Flex is quite complex and I often have to double check the rules and in those cases I go to the W3C specs or the MDN network and check exactly how things are supposed to work.
However trial and error is the way I learn most because the lessons stick in my brain better that way.
So I would say read up on the property to see how it should work and then test it out and understand it 
Thanks for the reply, In fact I think this is true for everything and anything even we learn mathematics, physics or any other subject in school only through practice and trial and error.
Hi there,
Here is the live demo.
I have a parent div, which is a flex, and two children div, which have flex-grow.
Left div has flex-grow 1 and right has flex-grow: 3 which means 25% and 75% space of the container is allocated?
But the result is in violation and somethings seem to be in error.
That’s not loading for me.
No Flex grow specifies how much of the remaining space in the flex container should be assigned to the item. It does not mean 75% or 25%. You would need to set flex-basis for that or add a width.
.box25 {
flex: 1 0 25%;
}
.box75 {
flex: 1 0 75%;
}
Hi there sir, accidentally index.html got deleted. I have reloaded.
Flex is very confusing. The more I try to learn it and master it so that I have to post the least questions on the forum the more I get confused.
One more thing sir, You said remaining space, but flex doesn’t leave any remaining space unless you constrain some div to a certain width, and in that case, I think the other div being a flex subscriber will eventually take away the remaining space. so adding an extra property of flex-grow is useless there too.
flex-grow property I could not understand how is useful.
Your Flex:
In your flex the first part has the HTML:
<div class="wrap">
<div class="box box1">Flex grow 1</div>
<div class="box box2">Flex grow 3</div>
</div>
and the CSS:
.wrap {
display: flex;
max-width: 1280px;
margin: 10px auto 20px;
padding: 10px;
background: #ccc;
}
.box {
padding: 10px;
border: 1px solid red;
}
.box1 {
flex-grow: 1;
}
.box2 {
flex-grow: 3;
}
My own link is active now I did the same thing, but those flex-grows are yet not working in my case.
The remaining space is only there if your content does not fill the whole width. If you fill the flex children with content then there is no remaining space as such. You need to use the flex-grow with flex-basis at the same time. That’s why they recommend in the specs that you use the shorthand to set the properties.
e.g.
flex:1 0 0%;
Flex-basis is auto by default (which basically means look at my content width) but if you set it to zero (IE11 like a % on the end of that unit) then you will see that the divs are roughly 3 to 1 in size even when filled with content.
I’ve added 3 more lines to my demo using the shorthand using 0% and you can see that now they are roughly 3 to 1 without any widths needed. The won’t be exactly the same as 75% and 25% because some space is taken into account.
Does that make it easier to understand. use shorthand and always set the basis when you have fluid content.
Yes they are working but 3 time nothing is still nothing. There is no free space to distribute
So there are two ways to do it →
and
Thank you so much for such an explanation, but I have a question, sir.
Suppose two inner DIV's are there → and in case want to give flex-grow 1 and 3 through the second way → boxbasis1 + boxbasis2, but at the same time I want that left div should have minimum 400PX width
I tried this:
.boxbasis1 {
flex: 1 0 400px;
}
.boxbasis2 {
flex: 3 0 0%;
}
But it doesn’t work.
This type of arrangement is not going to work →
because 400px it will treat as 400 number and 1 in .sright
min-width:400px
I think that the discussion but I have understood these concepts →
.sleft {
flex:1 0 400px;
}
.sright {
flex:3 0 0%;
}
I think the programing logic here will be →
flex-basis acts as a constraint, in general, that is what flex-basis does and alloting min-width to the DIV. In this case, the remaining available space will be divided by 1-3 combination.
Flex-basis is not a guaranteed measurement because it depends on whether flex-grow or shrink are also in effect. so flex:1 0 400px would would be 400px if there was enough room but it may also be bigger because the grow will make it grow.
I think you’ve got the basics but it is quite complicated because they all interact with each other and you can have quite a few variations depending on content and property.
Also flex-basis will override a width that has been set but will obey min-width and max-width.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
I was looking for certain additional discussion, but the thread is closed. Creating too many posts will miss the points to learn. So I am continuing the discussion on this related and relevant thread.
Reference Posts:
The current scenario is like this →
<article class="blogarticle">
<div class="left">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Possimus laboriosam eos eius beatae nobis exercitationem eveniet praesentium nisi accusantium architecto. Et dicta sequi inventore commodi harum veritatis libero, praesentium nesciunt.</p>
</div>
<div class="middle">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda ab commodi, temporibus. Corporis minus eius adipisci tempora optio veniam magnam. Porro tenetur ipsa adipisci, corporis labore ullam cum eos totam!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda ab commodi, temporibus. Corporis minus eius adipisci tempora optio veniam magnam. Porro tenetur ipsa adipisci, corporis labore ullam cum eos totam!</p>
</div>
<div class="right">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, impedit, mollitia repellat laboriosam consequatur molestiae id repellendus, odio commodi illum inventore totam nobis placeat nihil doloremque fuga? Sit, ipsa, eius?</p>
</div>
</article>
Associated CSS is like this →
article {
margin: auto;
border: 2px solid red;
}
.blogarticle {
display: flex;
justify-content: space-between;
gap: 30px;
}
.blogarticle .middle {
flex: 1 0 60%;
}
.blogarticle .left {
flex: 1 0 15%;
position: sticky;
}
.blogarticle .right {
flex: 1 0 25%;
}
.blogarticle .middle p {
margin-bottom: 20px;
}
Issue: The content is creating scroll + getting out of the solicited space.
If we look at mathematics.
left + middle + right = 16 + 15 +25 =100%
There is no space left for the gap, which is producing and requiring 60px of the extra width(30px + 30px).
Remedial will be to account for and adjust the width to fit in the mathematics, but was not flexbox meant to accommodate things without breaking? Or I am missing and not using property correctly?
I have reopened the original topic and moved the post to avoid confusion.
Thanks, I was slightly scared to send too many messages to moderators as you guys might have work load and that too in covid days and you may feel pestered by too many requests to open closed threads. Thank you so much for your understanding.
That’s correct so there are many ways to tackle this but the simplest is not to give a width to the centre column and remove flex-grow from the left and right.
If you leave the middle as flex:1 0 0 it will grow to fill the available space without overflow and you get the left and right columns just taking up the width that you wanted.
The justify-space-between is not needed because you are specifying the gap yourself.
Also the position:sticky on your left column will not work unless you give it a co-ordinate (top:0) but also it will not work on the default ‘stretch’ value of flexbox. In flexbox all boxes are equal height by default so the left column will never scroll within that context.
You need to align the left column to the top (I know its already there but if you coloured the columns you would see why it is different).
Here is the revised CSS.
article {
margin: auto;
border: 2px solid red;
}
.blogarticle {
display: flex;
/*justify-content: space-between;*/
gap: 30px;
}
.blogarticle .middle {
flex: 1 0 0%;
}
.blogarticle .left {
flex: 0 0 15%;
position:-webkit-sticky;
position: sticky;
top:0;
align-self:flex-start;
}
.blogarticle .right {
flex: 0 0 25%;
}
.blogarticle .middle p {
margin-bottom: 20px;
}
Note that position-sticky still needs the prefix for ios so use position:-webkit-sticky as well.
Lastly position sticky is different to position:fixed in that the element only remains sticky while its current context is scrolling. Once you have scrolled to the bottom of blogarticle then the sticky element will slide away with the rest of that article (assuming you had more content underneath). This is probably what you wanted anyway but is something to remember.
Hi there @PaulOB before making this post I tried that option, and that gives such arrangement despite the fact that the middle is the part that will hold the most important content →
I put the right side on flex: 1 0 0 then I get this arrangement:
The right gets the least share.
when we put both right and left on flex: 1 0 0 e get an equal sidebars, which is also not desired.
Did you not try the code I gave you.
i.e. this part gives you the result you want .
.blogarticle .middle {
flex: 1 0 0%;
}
.blogarticle .left {
flex: 0 0 15%;
}
.blogarticle .right {
flex: 0 0 25%;
}
Hi there, sorry for the inconvenience, but initially I missed it. I have copy-pasted but confused what is the difference between your code and my code. It still seems to be the same, but since it is working that means something is different. Thanks!