在未知高度的容器上设置垂直滚动 [英] Set vertical scroll on a container with unknown height

问题描述

是否可以使用flexbox在容器的容器上设置垂直滚动？

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

下面是一个简单的例子我需要什么：

 < div class =list flex-vertical> 
< header>某些标题< /标题> 
< ul class =flex-vertical> 
< li> Item1< / li> 
< li> Item2< / li> 
< li> Item3< / li> 
< li> Item4< / li> 
 ... 
< / ul> 
< / div> 
  

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

这是一支笔

解决方案

flex has一些短缺/缺陷/瑕疵，或者永远不会调用它们，并且需要一个内在的绝对元素来强制滚动。

< {身高：100％; overflow：hidden;}。list {display：flex; flex-direction：column; height：100％;} header {flex：0;}。vertical {flex：1;位置：相对; } .scroll {position：absolute;左：0;顶部：0;正确：0;底部：0; overflow：auto;}

 < div class =list FLEX-垂直> < header>部分标题< / header> < div class =vertical> < ul class =scroll> <李> ITEM1和LT; /锂> <李>项目2< /锂> <李>项目3< /锂> <李>项目4< /锂> <李>项目5< /锂> <李>项6< /锂> <李> Item7< /锂> <李> Item8< /锂> <李> Item9< /锂> <李> Item10< /锂> <李>第11项< /锂> <李> Item12< /锂> <李> Item13< /锂> <李> Item14< /锂> <李> Item15< /锂> <李> Item16< /锂> <李> Item17< /锂> <李> Item18< /锂>及LT;利> Item19< /立GT; <李> Item20< /锂> <李> Item21< /锂> <李> Item22< /锂> <李> Item23< /锂> <李> Item24< /锂> <李> Item25< /锂> <李> Item26< /锂> <李> Item27< /锂> <李> Item28< /锂> < / UL> < / div>< / div>  

Is it possible to set a vertical scroll on a container with unknown height using flexbox?

I can not use max-height as it will limit the height to some number that will not fit all screen sizes.

Here is a simple example of what i need:

<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>

I would like only the ul to scroll and obviously i don't know the height of it.

here is a pen

解决方案

flex has some short comings/bugs/flaws, or what ever to call them, and need an inner absolute element to force the scroll.

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;
}

<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>

这篇关于在未知高度的容器上设置垂直滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！