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

Question

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

why not fixed position ? or make the scroll in the second column instead of the whold wrap — Temani Afif
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

Aravind Reddy Aravind Reddy · Accepted Answer · 2017-11-15T09:52:49

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>

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

1 Answers