html - 如何在flex布局中使用固定位置？

Question

我有一个包含两列的 flexbox 布局。

左列固定，右列可滚动。

你怎么做到的？

看看下面的代码:

#parent {
  display: flex;
}
#left {
  flex-grow: 1;
}
#left div {
  position: fixed;
  background: blue;
  top: 0;
  left: 0;
  height: 100vh;
}
#right {
  flex-grow: 5;
  background: red;
  height: 300vh;
}

<div id="parent">
  <div class="child" id ="left">
    <div>
      ABC
    </div>
  </div>
  <div class="child" id ="right">
  DEF
  </div>
</div>

Fiddle

Answer 1

如果我理解您的要求，您希望右滚动而左滚动固定。这可以在不使用固定位置的情况下完成。

我个人也建议不要使用固定位置，除非绝对必要，因为它可能在移动设备上有一些不需要的行为，并且你有点失去了像 flexbox 这样的非定位解决方案的好处提供。

html, body {
  margin: 0;
}
#parent {
  display: flex;
  height: 100vh;
}
#left {
  flex-grow: 1;
  background: blue;
}
#right {
  flex-grow: 5;
  background: red;
  overflow: auto;
}
#right div {
  height: 300vh;
}

<div id="parent">
  <div class="child" id ="left">
      ABC
  </div>
  <div class="child" id ="right">
    <div>
      DEF
    </div>
  </div>
</div>