使用flex布局水平滚动时如何使行中的第一列保持粘性？答案

【问题标题】：how to make first column in a row sticky when scrolling horizontal using flex layout?使用flex布局水平滚动时如何使行中的第一列保持粘性？
【发布时间】：2018-04-28 11:24:25
【问题描述】：

使用 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 在水平滚动和通常的垂直滚动时出现在第一列下方滚动

【问题讨论】：

为什么不固定位置？或在第二列中滚动而不是整个换行
既然你在我现在删除的答案的评论中写道 “当我们垂直滚动时，我们需要两列在同一行（第一列和第二列）。这不是如果我们给出 position:fixed"，就会发生这种情况，看起来这个问题缺少我们能够给出正确答案的信息。基于此，我删除了我的答案。

标签： css flexbox position

【解决方案1】：

正如你在问题中提到的，它非常简单，使用 position:sticky Css 到左 div
见下面的sn-p

.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 的回复。如果您能提供一些适用于 IE 的解决方案，那就太好了。谢谢你
对于 IE，您可以使用 position:fixed，如其他解决方案中所述
哇，这太棒了！我不知道你能做到这一点......谢谢！
您可能希望在第一列有一个z-index，以确保滚动时它位于其他列的顶部。
谢谢，现在仍然有用！如果有人尝试和挣扎：我必须在非粘性列 (flex: 0 0 auto) 上设置 flex-shrink: 1 并设置其 min-width: 0 以防止变得太大，请参阅stackoverflow.com/questions/36230944/…