如何防止弹性项目高度因其内容而溢出[重复]
我刚开始学习flex，到目前为止我印象深刻。但是，我对一个包含页眉/页脚和三列的完整页面应用程序有一个问题。第一列包含一个项目列表，因为我不能给它的父项设置固定的高度，所以每次列表增长时，它都会向下推页脚。
这是一个布局的代码：http://codepen.io/anon/pen/vNVQNjHtml：
<html>
<head>
<body>
<div class="app-wraper">
<div class="Navbar"></div>
<div class="main-content">
<div class="Bidlist">
<div class="column">
<div class="tabcontainer">
</div>
<div class="content-container">
<ul class="list-group instruments">
<li class="intrument"></li>
<li class="intrument"></li>
<li class="intrument"></li>
<li class="intrument"></li>
<li class="intrument"></li>
<li class="intrument"></li>
<li class="intrument"></li>
<li class="intrument"></li>
<li class="intrument"></li>
<li class="intrument"></li>
<li class="intrument"></li>
<li class="intrument"></li>
<li class="intrument"></li>
<li class="intrument"></li>
<li class="intrument"></li>
</ul>
</div>
</div>
</div>
</div>
<div class="footer"></div>
</div>
</body>
</head>
</html>
CSS：
html,
body {
background-color: #212121;
overflow: hidden;
}
/* layout */
.app-wraper {
display: flex;
height: 100vh;
max-height: 100vh;
flex-direction: column;
justify-content: flex-start;
}
.Navbar {
height: 50px;
background-color: black;
margin-bottom: 0px;
}
.main-content {
display: flex;
flex-direction: row;
flex-grow: 1;
}
.Bidlist {
min-width: 25%;
display: flex;
flex-direction: column;
padding-left: 0px!important;
padding-right: 1px!important;
background-color: grey;
}
.column {
display: flex;
flex-direction: column;
flex-grow: 1;
border: 2px solid #3D3C3D;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
margin-bottom: 2px;
}
.tabcontainer {
color: #fff;
display: flex;
height: 40px;
background-color: black;
flex-direction: row;
justify-content: space-around;
}
.ContentContainer {
flex-grow: 1;
display: flex;
}
.instruments {
display: flex;
flex-direction: column;
overflow-y: auto;
}
.instrument {
flex-grow: 1;
}
.footer {
height: 25px;
background-color: black;
}
共有2个答案
考虑指定您的内容高度，以便具有"修复"维度，并使用溢出设置元素框的溢出方式。
对于更多的高级方案，您还可以考虑使用：
>
CSS最小高度属性
CSS最大高度属性
实例：https://jsfiddle.net/enz7ae5d/
.column {
display: flex;
flex-direction: column;
flex-grow: 1;
border: 2px solid #3D3C3D;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
margin-bottom: 2px;
height: 200px;
overflow:scroll;
}
您需要将最小高度：0添加到中。主要内容CSS规则。这样可以防止该元素拉伸以包含其子元素，并将页脚推离屏幕（这是您试图避免的不良行为）。
这是因为flex项（flex容器的子项）基于其内容建立了默认的最小主大小，并且拒绝小于该最小值。在您的情况下（外部flex容器是垂直方向的），“主要尺寸”是高度，所讨论的flex项目（.main content）正在建立基于内容的最小高度。
（如果您希望列表项是可滚动的，那么您可能还需要将overflow-y： auto添加到. main-Content）
-
问题内容： 我将以下布局考虑在内。每个列表项由两列表示。第二列应占用所有可用空间，但 如果第一列占用太多空间，则应以最小大小将其固定在右侧。第一栏应显示省略号。 问题在最后一种情况下发生。当第一列包含太多文本时，它没有显示省略号，而是将其自身拉伸到弹性框之外，从而导致出现水平滚动条，而第二列则没有锚定在右侧。 问题答案： 更新 添加有效的代码： 原始答案/解释。W3C规范说：“ 默认情况下，弹性项
-
我有以下的布局在脑海中的一个列表。每个列表项由两列表示。第二列应该占用所有可用空间，但是如果第一列占用太多空间，它应该以最小大小固定在右边。然后，第一列应显示省略号。 问题发生在最后一个案例中。当第一列包含太多文本时，它不会显示省略号，而是将自身从flexbox中伸出，从而显示水平滚动条，而第二列不会定位到右侧。 我想让它呈现如下（模型）： 我怎样才能做到这一点？ 这是提琴样品。
-
问题内容： 我正在使用flexbox将某些项目居中放置在一个块中，但我希望其中的每个项目都位于其自己的行中。例如，我希望橙色方块位于文本上方，但是在使用flex之后，将其移动到了文本的侧面- 请问有人知道解决这个问题的方法吗？ 问题答案： 添加此样式： 这告诉flexbox在行而不是列中显示其子级。（我知道，很奇怪，对吧？） 更新的代码段：
-
问题内容： 我有一个容器用。它有一个孩子。 我怎样才能使孩子显得“内联”？ 具体来说，如何使孩子的宽度取决于其内容，而不扩展到父母的宽度？ 我试过的 我将孩子设置为，但仍然占用了整个宽度。我还尝试了所有其他显示属性，但没有任何效果。 例： 问题答案： 使用的容器上，或在柔性的项目。 不需要。 flex容器的初始设置为。这意味着柔性物品将沿横轴扩展以覆盖容器的整个长度。 该属性的作用与之相同，除了适
-
我拥有的是一个简单的，后跟两个子元素，和。 具有固定的高度，应填充剩余的空白空间。这很容易通过实现，但是由于某种原因，我不知道如何使元素溢出，以便在其内容超过网站窗口高度时工作？ 这里是一个JSFiddle，如果您设置高度为，您可以看到元素很好地填充了空间，但是当大得多时元素不应该扩展现在的情况我错过了什么？ 如果可能的话，我宁愿不使用JavaScript来解决这个问题。
-
问题内容： TL; DR： CSS网格有什么类似的东西吗？ 我试图用几个月的大4x3网格创建年视图日历，而白天则嵌套7x6网格。 日历应填满页面，因此Year网格容器的宽度和高度分别为100％。 为简单起见，该笔中的每个月都有31天，从星期一开始。 我还选择了一个小得离谱的字体来演示该问题： 网格项（=日单元格）非常简洁，因为页面上有数百个。当日期数字标签过大（使用左上角的按钮随意使用笔中的字体大