CODEWITHSUNDEEP
htmlcss
Iretii0511
Iretii0511

Reputation: 19

Css position fixed not working with display flex

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.

Upvotes: 0

Views: 2014

Answers (1)

Shreyas Jani
Shreyas Jani

Reputation: 21

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

Upvotes: 1

Related Questions