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

Answer 1

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>