Within my parent container, I am using flex-box to organize the layout.
One of the child divs (.child-two) needs to stick out 60px from the top once it reaches the header.
Unfortunately, setting position: sticky doesn't work when the parent container is a flex-box.
<div class="parent-container">
<div class="child-one"></div>
<div class="child-two"></div>
<div class="child-three"></div>
</div>
Here's the css:
.parent-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
padding-top: 24px;
-ms-flex-line-pack: baseline;
align-content: baseline;
}
.child-two {
position: sticky;
top: 66px;
background-color: #2ecc71;
}
.child-one, .child-three {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
margin-bottom: 16px;
}
Is there a way to achieve this without removing the flex property from the .parent-container?
Note that this code snippet is simplified and part of a larger web application with multiple elements.