行布局

两行布局

两行布局主要是 PX-AUTO 型，在线 Demo , 但在实际应用中需要注意两点：

1. PX 可能在不同页面具体的值不一样
2. Scroll 不要被顶部和底部遮盖

HTML

<main>
  <div class="px">PX</div>
  <div class="auto-scroll-parent">
    <div class="auto-scroll-child">AUTO(scroll)</div>
  </div>
</main>

LESS

main {
  display: flex;
  flex-direction: column; // 调整主轴方向
  height: 100vh;
}
.px {
  height: 50px; // 高度有可能在实际中自动产生，此处为模拟
  flex-shrink: 0;
}
.auto-scroll {
  &-parent {
    overflow-y: scroll;
  }
  &-child {
    height: 400px;
  }
}

tip

要想出现 y 轴的滚动条，那么父元素的实际高度要比子元素的高度小，且 overflow-y 是加在父元素上的。

如果使用的 calc, margin, position: absolute 之类的方式进行布局, 则 AUTO 部分的 top 偏移值可能在不同页面实际值不一样，那么使用 flex 将是一个非常不错的选择。

三行布局

三行布局主要是 PX1-AUTO-PX2 型