Css position fixed not working with display flex - html

Question

I am trying to layout my page using flexbox.
I want the right child to be fixed and the left one to scroll.
below is the markup.
.parent {
display: flex;
}
.child1 {
position:fixed;
order: 1;
height: 300px;
background-color: red;
}
.child2 {
order: 2;
height: 100px;
background-color: blue;
}
<div class="parent">
<div class="child1">1</div>
<div class="child2">2</div>
</div>
What I want to do is to make the child1 static while child2 scrolls down.

Answer 1

Perhaps, you want to use position:sticky to achieve the layout.
Here's the HTML structure
<div class="parent">
<div class="child child1">Child 1 content goes here</div>
<div class="child child2">
<div class="sticky">
Child 2 content goes here
</div>
</div>
</div>
And the CSS
.parent {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.child {
flex: 0 1 48%;
border: 5px solid #ececec;
}
.child1 {
font-size: 32px;
}
.child2 {
position: sticky; // will keep the position of the div stuck
top: 0; // this will specify when do you want the position sticky to take effect from the top
}
Have linked the codepen https://codepen.io/backslashr/pen/abvzQmo