如何在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>

小提琴

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>

Answer 2

干得好

#parent {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: stretch;
}
#left {
  flex-grow: 1;
  background: lightgray;
}
#right {
  flex-grow: 5;
  background: red;
  overflow-y: auto;
}
.scroll {
  height: 300vw;
}

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