如何使用 Flex 布局在水平滚动时使行中的第一列具有粘性

Question

使用 flex 布局水平滚动时如何使行中的第一列具有粘性？

.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>

这是 *ngFor(循环( 中的一行。因此，可以有多个这样的行，例如表结构。我希望第二个div在滚动水平和通常的垂直滚动时出现在第一列下方的滚动

Answer 1

它非常简单的兄弟，正如你在问题中使用position:sticky Css向左div
请参阅下面的代码片段

.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>