Question

是否可以使用flexbox在容器未知高度上设置垂直滚动？

我无法使用max-height，因为它会将高度限制为不适合所有屏幕尺寸的某个数字。

以下是我需要的一个简单示例：

<div class="list flex-vertical">
  <header>Some header</header>
  <ul class="flex-vertical">
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
    <li>Item4</li>
    ...
  </ul>
</div>

我只想滚动ul，显然我不知道它的高度。

here is a pen

Answer 1

flex有一些缺点/错误/缺陷，或者什么都叫它们，需要一个内部绝对元素来强制滚动。

＆＃13;

html, body{
  height: 100%;
  overflow: hidden;
}
.list{
  display: flex;
  flex-direction: column;
  height: 100%;
}
header {
  flex: 0;
}
.vertical {
  flex: 1;
  position: relative;  
}
.scroll {  
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
}

＆＃13;

<div class="list flex-vertical">
  <header>Some header</header>
  <div class="vertical">
    <ul class="scroll">
      <li>Item1</li>
      <li>Item2</li>
      <li>Item3</li>
      <li>Item4</li>
      <li>Item5</li>
      <li>Item6</li>
      <li>Item7</li>
      <li>Item8</li>
      <li>Item9</li>
      <li>Item10</li>
      <li>Item11</li>
      <li>Item12</li>
      <li>Item13</li>
      <li>Item14</li>
      <li>Item15</li>
      <li>Item16</li>
      <li>Item17</li>
      <li>Item18</li>
      <li>Item19</li>
      <li>Item20</li>
      <li>Item21</li>
      <li>Item22</li>
      <li>Item23</li>
      <li>Item24</li>
      <li>Item25</li>
      <li>Item26</li>
      <li>Item27</li>
      <li>Item28</li>
    </ul>
  </div>
</div>

＆＃13;

在未知高度的容器上设置垂直滚动

1 个答案: