css - 使用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(loop) 中的一行。所以可以有多个这样的行，如表格结构。我希望第二个 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>