使用flex制作滚动列表

使用flex制作滚动列表

因为自己在做一点小东西，所以就有个需求，一个元素里面需要有两个子元素，两个子元素竖排排列，第二个子元素里面的内容不定长，需要做滚动，但第二个元素的高度需要自适应。

在学习的过程稿发现flex和overflow挺有意思的，特此记录下来。

代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div class="parent">
    <div style="height: 200px; background: #66ccff">标题</div>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
    </ul>
  </div>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    .parent {
      display: flex;
      flex-direction: column;
      height: 500px;
      overflow: hidden
    }
    ul {
      overflow: auto;
      height: 100%;
    }
    li {
      height: 200px;
      border: 1px solid #ccc;
    }
  </style>
</body>
</html>

效果

Document
标题
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

分析

首先是.parent。将display设置为弹性布局，并且规定了布局方向为竖排，对于溢出元素的处理方式设置为隐藏。这样的情况下，html就会将这个元素里面的布局重置，保证了里面的元素可以自适应高度，不会出现子元素与父元素高度相同的情况，并且对于移除内容进行了隐藏

第二就是ul。对于其中ul其中的溢出元素做了自动处理，实际上是将溢出元素设置为滚动，这样ul里面的元素就可以进行滚动。

第三要注意height。如果要求ul为自适应，则height一定为100%（或者inherit）,并且父级元素需要显式的设置高度，不能为auto

前端
#速查集
使用flex制作滚动列表
https://note.0moe.cn/前端/2019/11/03/使用flex制作滚动列表/
作者
Dawn_南风
发布于
2019年11月3日
许可协议