Html 防止flex父级在没有溢出的情况下增长：隐藏

关于如何防止flex子项增长的信息太多，但对于如何防止flex父项增长（因为子项）却太难了

考虑以下布局：

• 外部元素的高度和宽度是固定的（可能适用于本机应用程序）
• 页眉和页脚既不增长也不收缩。此外，页脚始终位于底部
• 主要内容（页眉和页脚之间）占用所有可用空间
• 主要内容没有滚动。
  • 但是内部元素可以滚动。例如。章节标题下方的滚动视图：

初始解决方案：

.layout{
显示器：flex；
弯曲方向：立柱；
宽度：640px；
高度：300px；
背景：rgba（220,20,60,0.2）；
}
.标题{
flex:0自动；
填充：4px8px；
背景：rgba（220,20,60,0.2）；
}
.内容{
显示器：flex；
弯曲方向：立柱；
flex:1自动；
填充：4px8px；
背景：rgba（255,69,0,0.2）；
溢出y：隐藏；
}
.头衔{
flex:0自动；
背景：rgba（255,255,0,0.2）；
}
.splitView{
显示器：flex；
flex:1自动；
背景：rgba（0,128,128,0.2）；
溢出y：隐藏；
}
.分割视图部分{
显示器：flex；
弯曲方向：立柱；
弹性：150%；
}
.splitView节：第一个子级{
背景：rgba（0191255,0.2）；
}
.splitView节：最后一个子项{
背景：rgba（0,0,255,0.2）；
}
.scrollView{
flex:1自动；
背景：rgba（165,42,42,0.2）；
溢出y：自动；
}
维利比根{
背景：cd5c；
宽度：50px；
高度：500px；
长方体阴影：rgba（0,0,0,0.25）0 0 6px
}
.页脚{
flex:0自动；
填充：4px8px；
背景：rgba（173255,47,0.2）；
}

我是头球手
标题
章节标题
我是页脚

如果您将“veryBigElement”高度设置为500px，并且希望主内容不会滚动，则只能滚动内部元素。因此，您必须添加每个BigeElement父项的MAX-HEIGHT。如果删除overflow-y:hidden，则splitView部分将不会增长。

您可以删除“overflow-y:hidden”，并将“高度：100%”添加到.splitView和-section中

.splitView{
    display: flex
    flex: 1 1 auto
    background: rgba(#008080, 0.2)
    height: 100%
    &-section{  
        display: flex
        flex-direction: column
        flex: 1 1 50%
        height: 100%
    }
}

由于设置了父div的高度，子div将继承该高度

---

我知道这是一个老问题，但无论如何对其他人来说都是有用的

---

由于您不想对阴影元素的外部容器或边距应用某些填充，您可以简单地为阴影元素指定z-index（大于任何外部元素的z-index（当然，如果设置了））属性，它将覆盖截止值。

谢谢您的解决方案。不幸的是，我们需要使用预处理器计算这个最大高度。至于更复杂的布局，这将是很难做到的。到底是什么问题与框阴影？这似乎很正常。是因为在其他元素上看不到它吗？预期的结果是什么？@Salix，问题是：我们只看到红色矩形的右阴影，但希望看到所有的四个侧面阴影。你希望阴影覆盖其他部分？部分标题是否增长？或者总是相同的高度？通过将“scrollView”放在另一个容器中，您可以将该容器放置在VeryBigeElement上，并给出“：after”元素的高度。在我的答案中查看更新的代码笔。接近我搜索的解决方案。谢谢你的回答。然而，您在回答中没有提到什么，因为

overflow-y:auto阴影仍将被切断。看起来没有直观的解决方案。只有填充或负边距才能解决此问题。是的。但这是正常的，不是因为溢出-y:auto。实际上，这是因为你想让高度与父对象的高度相同，这样父对象就不会增长。如果它不能更高，它就不能溢出，因此阴影就不能过去。但对于纸牌来说，填充是常见的。如果你真的想让阴影覆盖到父对象上，你可以用：after之类的方法，很好的解决方案！谢谢你的回答。