是否可以使用 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
滚动,显然我不知道它的高度。
最佳答案
flex
有一些缺点/错误/缺陷,或者怎么调用它们,并且需要一个内部绝对元素来强制滚动。
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>
关于html - 在高度未知的容器上设置垂直滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35549997/