自动滚动打破高度限制

Question

破碎高度

overflow: auto未激活时的效果

所以，我让高度完美地工作，因为它填充了100vh应用容器的剩余空间(蓝色边框线)，但是当我在。action列表中添加overflow: auto并添加足够的项目时，它需要溢出来激活，高度会突破应用容器并推过视口的底部。我已经尝试了。action-list的所有高度操作，但都无济于事。如果我将。action-container或。action-plate更改为较小的高度百分比，我就能够使整个内容完美地匹配，但如果overflow: auto未激活，则会使高度变得太小。我已经无计可施了。

(。App在一个单独的CSS文件中。所有彩色边框仅供参考。

.app {
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
border: 1px blue solid;
}
.app-container {
margin: 0 0 30px 0;
padding: 0;
box-sizing: border-box;
height: 100%;
width: 100%;
border: 1px solid green;
}
.action-plate {
height: 100%;
width: 100%;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid red;
}
.action-container {
width: 85%;
height: 89%;
background: black;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #9A070E, #9e4676, #f98a2f93);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #4e080b63, #77335a48, #b6662457); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
border-radius: 15px;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 2px 1px 18px rgb(202, 202, 202);
border: 1px thistle solid;
}
.action-list {
width: 100%;
overflow: auto;
box-sizing: border-box;
}
.add-item {
margin: 10px;
box-sizing: border-box;
}

Answer 1

使用flex-grow使列表容器灵活，以便填充可用空间，并更改默认的min-height: auto以允许列表容器收缩

查看HTML标记将有助于理解这里发生了什么。但是看起来.action-plate无法解析它的height: 100%，所以它的行为就像认为height是auto，在这种情况下，这意味着它将尝试根据其内容的高度来调整自己的大小。这就是为什么它长得这么大，而不是呆在100vh容器里。

为了得到你想要的效果，你可以利用flexx属性而不是使用百分比。

页眉和制表符的大小应该与其内容相同，因此我们不需要在那里做任何额外的操作。

列表的容器应该占用app容器中所有的剩余空间——不多也不少。为了确保它增长到填满可用空间，我们设置了flex-grow: 1(默认情况下flex项有flex-grow: 0)。

接下来，flex项目将尝试在默认情况下保持其min-content大小。这基本上意味着您的伸缩项将尝试至少具有包含其所有项的大小。这就是为什么它会超越应用容器。

所以我们给它min-height: 0而不是默认的min-height: auto。这意味着，如果你有很多内容，你的伸缩项目将不再试图"保护"它的大小，并将缩小以填充容器的大小。

下面是一个工作示例:

body {
margin: 0;
color: white;
}
.app {
display: flex;
flex-direction: column;
height: 100vh;
width: 320px; /* just to illustrate the working example */
height: 480px; /* just to illustrate the working example */
box-sizing: border-box;
background-color: black;
}
header {
text-align: center;
}
.nav-list {
display: flex;
list-style-type: none;
padding: 0;
justify-content: space-evenly;
}
.todo-list-container {
flex-grow: 1;
padding: 16px;
min-height: 0;
overflow: auto;
}
.todo-list-content {
background-color: burlywood;
}
.todo-item {
font-size: 32px;
}

<main class="app">
<header><h1>Exist Better</h1></header>
<nav>
<ul class="nav-list">
<li>Routines</li>
<li>Behaviors</li>
<li>To Dos</li>
</ul>
</nav>
<div class="todo-list-container">
<div class="todo-list-content">
<ul class="todo-list">
<li class="todo-item">Routine 1</li>
<li class="todo-item">Routine 2</li>
<li class="todo-item">Routine 3</li>
<li class="todo-item">Routine 4</li>
<li class="todo-item">Routine 5</li>
<li class="todo-item">Routine 6</li>
<li class="todo-item">Routine 7</li>
<li class="todo-item">Routine 8</li>
<li class="todo-item">Routine 9</li>
<li class="todo-item">Routine 10</li>
</ul>
<button>Add a new routine</button>
</div>
</div>
</main>