Two columns, one with position sticky [duplicate] - html

Question

This question already has answers here:
My position: sticky element isn't sticky when using flexbox
(8 answers)
Closed 1 year ago.
I have a simple two column layout:
.container {
display: flex;
flex-direction: row;
}
.col {
padding: 30px;
width: 20%;
}
.col.right {
position: sticky;
}
<div class='container'>
<div class='col left'>Lorem<br/>ipsum<br/>dolor<br/>sit<br/>amet,<br/>consectetur<br/>adipiscing<br/>elit,<br/>sed<br/>do<br/>eiusmod<br/>tempor<br/>incididunt<br/>ut<br/>labore<br/>et<br/>dolore<br/>magna<br/>aliqua.<br/>Leo<br/>urna<br/>molestie<br/>at<br/>elementum<br/>eu<br/>facilisis.<br/>Quisque<br/>non<br/>tellus<br/>orci<br/>ac<br/>auctor<br/>augue.<br/>Ac<br/>turpis<br/>egestas<br/>sed<br/>tempus<br/>urna<br/>et<br/>pharetra<br/>pharetra<br/>massa.<br/>Elit<br/>eget<br/>gravida<br/>cum<br/>sociis<br/>natoque.<br/>Orci<br/>a<br/>scelerisque<br/>purus<br/>semper.<br/>Pellentesque<br/>dignissim<br/>enim<br/>sit<br/>amet.<br/>Eu<br/>tincidunt<br/>tortor<br/>aliquam<br/>nulla<br/>facilisi<br/>cras<br/>fermentum<br/>odio<br/>eu.<br/>Nunc<br/>mattis<br/>enim<br/>ut<br/>tellus.<br/>Convallis<br/>posuere<br/>morbi<br/>leo<br/>urna<br/>molestie.<br/>Egestas<br/>sed<br/>tempus<br/>urna<br/>et<br/>pharetra.<br/>Aliquet<br/>eget<br/>sit<br/>amet<br/>tellus.
</div>
<div class='col right'>Tincidunt<br/>praesent<br/>semper<br/>feugiat<br/>nibh<br/>sed<br/>pulvinar<br/>proin<br/>gravida.<br/>Phasellus<br/>vestibulum<br/>lorem<br/>sed<br/>risus<br/>ultricies<br/>tristique.<br/>Pellentesque<br/>pulvinar<br/>pellentesque<br/>habitant<br/>morbi<br/>tristique<br/>senectus<br/>et.<br/>Enim<br/>neque<br/>volutpat<br/>ac<br/>tincidunt<br/>vitae<br/>semper<br/>quis<br/>lectus<br/>nulla.<br/>Commodo<br/>viverra<br/>maecenas<br/>accumsan<br/>lacus<br/>vel<br/>facilisis<br/>volutpat<br/>est<br/>velit.
</div>
</div>
I'd like the right column to stick to the top of the viewport when the left column scrolls, but I'd also like the right column to be scrollable. Is this possible with CSS?

Answer 1

Scrolling need some height limit, something like this should work.
.container {
display: flex;
flex-direction: row;
overflow: auto; /* Scroll ability */
height: 500px; /* Need some height constraint */
}
.col {
padding: 30px;
width: 20%;
}
.col.right {
position: sticky;
top: 0; /* Stick limit */
overflow: auto; /* Scroll ability */
}
<div class='container'>
<div class='col left'>Lorem<br/>ipsum<br/>dolor<br/>sit<br/>amet,<br/>consectetur<br/>adipiscing<br/>elit,<br/>sed<br/>do<br/>eiusmod<br/>tempor<br/>incididunt<br/>ut<br/>labore<br/>et<br/>dolore<br/>magna<br/>aliqua.<br/>Leo<br/>urna<br/>molestie<br/>at<br/>elementum<br/>eu<br/>facilisis.<br/>Quisque<br/>non<br/>tellus<br/>orci<br/>ac<br/>auctor<br/>augue.<br/>Ac<br/>turpis<br/>egestas<br/>sed<br/>tempus<br/>urna<br/>et<br/>pharetra<br/>pharetra<br/>massa.<br/>Elit<br/>eget<br/>gravida<br/>cum<br/>sociis<br/>natoque.<br/>Orci<br/>a<br/>scelerisque<br/>purus<br/>semper.<br/>Pellentesque<br/>dignissim<br/>enim<br/>sit<br/>amet.<br/>Eu<br/>tincidunt<br/>tortor<br/>aliquam<br/>nulla<br/>facilisi<br/>cras<br/>fermentum<br/>odio<br/>eu.<br/>Nunc<br/>mattis<br/>enim<br/>ut<br/>tellus.<br/>Convallis<br/>posuere<br/>morbi<br/>leo<br/>urna<br/>molestie.<br/>Egestas<br/>sed<br/>tempus<br/>urna<br/>et<br/>pharetra.<br/>Aliquet<br/>eget<br/>sit<br/>amet<br/>tellus.
</div>
<div class='col right'>Tincidunt<br/>praesent<br/>semper<br/>feugiat<br/>nibh<br/>sed<br/>pulvinar<br/>proin<br/>gravida.<br/>Phasellus<br/>vestibulum<br/>lorem<br/>sed<br/>risus<br/>ultricies<br/>tristique.<br/>Pellentesque<br/>pulvinar<br/>pellentesque<br/>habitant<br/>morbi<br/>tristique<br/>senectus<br/>et.<br/>Enim<br/>neque<br/>volutpat<br/>ac<br/>tincidunt<br/>vitae<br/>semper<br/>quis<br/>lectus<br/>nulla.<br/>Commodo<br/>viverra<br/>maecenas<br/>accumsan<br/>lacus<br/>vel<br/>facilisis<br/>volutpat<br/>est<br/>velit.
</div>
</div>