7

how to make first column in a row sticky when scrolling horizontal using flex layout ?

.wrapper {
  display: flex;
  height: 100vh;
  overflow-x: auto
}

.first-column {
  flex: 1 0 300px;
  background: gray;
}

.second-column {
  flex: 0 0 auto;
  padding: 20px;
  overflow: auto;
}
<div class="wrapper">
  <div class="first-column">
    <blockquote><i>Please, make me fixed!</i></blockquote>
  </div>
  <div class="second-column">
    hello How are u?hello How are u?hello How are u?hello How are u?hello How are u?hello How are u?hello How are u?hello How are u?hello How are u?hello How are u?hello How are u?hello How are u?hello How are u?hello How are u?hello How are u?hello How are
    u?hello How are u?
  </div>
</div>

This is a row inside a *ngFor(loop). So there can be multiple such rows like a table structure.I want the second div appear scroll beneath first column when scrolling horizontal and usual vertical scroll

ebin
  • 191
  • 2
  • 5
  • why not fixed position ? or make the scroll in the second column instead of the whold wrap – Temani Afif Nov 15 '17 at 09:52
  • Since you, in a comment at my now deleted answer, wrote _"When we scroll vertical, we need both columns in same line(first-column and second-column). Which is not happening if we are giving position:fixed"_, it appears the question lacks info for us to be able to give a proper answer. Based on that I deleted my answer. – Asons Nov 16 '17 at 22:56

1 Answers1

9

Its very simple bro as u mentioned in the question use position:sticky Css to left div
See the snippet below

.wrapper {
  display: flex;
  height: 100vh;
  overflow-x: auto
}

.first-column {
  flex: 1 0 300px;
  background: gray;
  position: sticky;
  left: 0;
}

.second-column {
  flex: 0 0 auto;
  padding: 20px;
  overflow: auto;
}
<div class="wrapper">
  <div class="first-column">
    <blockquote><i>Please, make me fixed!</i></blockquote>
  </div>
  <div class="second-column">
    hello How are u?hello How are u?hello How are u?hello How are u?hello How are u?hello How are u?hello How are u?hello How are u?hello How are u?hello How are u?hello How are u?hello How are u?hello How are u?hello How are u?hello How are u?hello How are
    u?hello How are u?
  </div>
</div>
Aravind Reddy
  • 747
  • 6
  • 20
  • Thanks Aravind for your reply. It would be great if you can provide some solution that will work in IE as well. Thank u – ebin Nov 15 '17 at 12:56
  • for IE you can use `position:fixed` as mentioned in other solutions – Aravind Reddy Nov 16 '17 at 07:28
  • Wow this is great! I had no idea you could do this...thanks! – TetraDev Jan 09 '19 at 17:17
  • 1
    You might want to have a `z-index` on the first column to make sure it's on top of the other columns when you scroll. – JanP May 04 '21 at 06:54
  • Thanks, still useful now! In case somebody tries and struggles: I had to set flex-shrink: 1 on the non-sticky column (`flex: 0 0 auto`) and set its `min-width: 0` to prevent getting too large, see https://stackoverflow.com/questions/36230944/prevent-flex-items-from-overflowing-a-container – Ingo Steinke Dec 16 '21 at 16:35