0

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?

j08691
  • 204,283
  • 31
  • 260
  • 272
duhaime
  • 25,611
  • 17
  • 169
  • 224
  • 1
    Set `align-items: flex-start;` on parent. Remove useless `flex-direction: row;` *(it's the default anyway)* and set `top:0` for your sticky element. without specifying when to become sticky, it will never stick :) – vsync Dec 08 '21 at 15:18

1 Answers1

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>
Rainbow
  • 6,772
  • 3
  • 11
  • 28