Good afternoon bosses,

I am working with flexbox, I want one of it's item to be fixed while the right on scrolls.

Let's say I have this markup

<div class="parent">
<div class="child1">1</div>
<div class="child2">2</div>
</div>


.parent{
display: flex;
}

I want .child1 to be fixed while .child2 scrolls it's contents. I learnt position fixed or absolute takes an item away from it's flexbox. I have tried few polyfills all to no avail.

Search for sticky.js JavaScript plugin

Child 2 fixed how...for it to be responsive ass d browser shrink or wat

Your question is not cleared to me though. Can u explain better or better with screenshot?

meanwhile, i will be training people on software development and web designing on 15th of this month(April) via an audiovisual screen record format uploaded in google classroom, to join just whatsapp me on 08093921440

Iambro:
Search for sticky.js JavaScript plugin

Plugin for this small thing?!

Iretii0511:
Good afternoon bosses,

I am working with flexbox, I want one of it's item to be fixed while the right on scrolls.

Let's say I have this markup

<div class="parent">
<div class="child1">1</div>
<div class="child2">2</div>
</div>


.parent{
display: flex;
}

I want .child1 to be fixed while .child2 scrolls it's contents. I learnt position fixed or absolute takes an item away from it's flexbox. I have tried few polyfills all to no avail.

Hey bro. Let me try and help you out. If you want to make the child 1 fixed and the other to scroll. Here are what you need to do.

Firstly give the body a height. E.g body {height: 200vh;} The reason why you need to give the body a height is so that you will be able to see that your child 1 is fixed and the child 2 content scroll as you scroll down.

After doing that, give the parent of the two children a display of flex. After you've done that, give the child 1 a position of fixed and the child 2 shouldn't have any positioning value. This should work. Once you scroll up the child 1 will stay fixed because we gave it a position of fixed and other will move up out of your view as you scroll down. Hope you get it.

RemiAbdulSamad:
Hey bro. Let me try and help you out. If you want to make the child 1 fixed and the other to scroll. Here are what you need to do.

Firstly give the body a height. E.g body {height: 200vh;} The reason why you need to give the body a height is so that you will be able to see that your child 1 is fixed and the child 2 content scroll as you scroll down.

After doing that, give the parent of the two children a display of flex. After you've done that, give the child 1 a position of fixed and the child 2 shouldn't have any positioning value. This should work. Once you scroll up the child 1 will stay fixed because we gave it a position of fixed and other will move up out of your view as you scroll down. Hope you get it.

No it won't work. Position absolute and fixed takes anything out of it's space. I solved it by deepening the relationship and using position sticky on the grandchild then defined it's top value. Thanks for your input.

Karleb:


Plugin for this small thing?!

I actually used a js plugin cos i was worried about browser compatibility for position sticky. But I guess I have to return back to plain css and the plugin couldn't give me what I wanted. I wanted to create a polyfill but the js polyfill is having problem with jumpiness, same issue I had with the plugin.

Iretii0511:
Good afternoon bosses,

I am working with flexbox, I want one of it's item to be fixed while the right on scrolls.

Let's say I have this markup

<div class="parent">
<div class="child1">1</div>
<div class="child2">2</div>
</div>


.parent{
display: flex;
}

I want .child1 to be fixed while .child2 scrolls it's contents. I learnt position fixed or absolute takes an item away from it's flexbox. I have tried few polyfills all to no avail.

Screenshots would have been better.
Do you want it to scroll vertically or horizontally?

If you want to scroll veritically here's what you should do:
=> set height and width for the parent container
=> position child1 at the top of the container(using position:relative property) relative to the parent container.
=> fix child2 relative to child1
=> scroll the contents of child2 using overflow property

Method 2
This is another way you can go about it. Here, we are using HTML Table.
Using this method you do not need the parent container, the table itself is the parent container.

=> create a table and set the desired height and width
=> create two rows for child1 and child2 respectively and adjust the dimensions using colspan and rowspan table properties.
=> insert your containers into the rows and set their properties
=> scroll the second row(using overflow property)

Something like this:
<table>
<tr>
<td>
<div class="child1"> element </div>
</td>
</tr>
<tr>
<td>
<div class="child2"> element </div>
</td>
</tr>
</table>


The second method is way more simple.
You can use bootstrap flex methods to scroll the rows.

Goodluck.

Hi StacyO,

How have you been? It's been quite sometimes. You didn't even try to reach out.

Iretii0511:
Hi StacyO,

How have you been? It's been quite sometimes. You didn't even try to reach out.

Missed you.
Been good though,how about you??

Thought you chose to remain silent on here.

I hope you good?

StacyO:


Missed you.
Been good though,how about you??

Thought you chose to remain silent on here.

I hope you good?

I missed you too dear.
I come online, just don't comment much. How is Christmas gonna be now? Will you be travelling?

Iretii0511:
Good afternoon bosses,

I am working with flexbox, I want one of it's item to be fixed while the right on scrolls.

Let's say I have this markup

<div class="parent">
<div class="child1">1</div>
<div class="child2">2</div>
</div>


.parent{
display: flex;
}

I want .child1 to be fixed while .child2 scrolls it's contents. I learnt position fixed or absolute takes an item away from it's flexbox. I have tried few polyfills all to no avail.

I forgot css.use a framework bro.
Because I remember same thing I did it using a jQuery code during building my blog

Tie the first child a rope to be fixed...

Use second law of motion according to Newton on the second child for Free fall.


Thank me after