css - 在其中一个元素中设置高度时，Flex 布局出现奇怪的行为

Question

在下面的 GIF 中，可以看到当我为页脚元素设置 height 时，布局会在 sidenav 和页脚之间添加一个空格。

这里有什么问题？如果没有这种行为，如何更改页脚元素的高度？我的 CSS 是:

.flex-container {
    position: absolute;
    top: 60px;
    bottom: 60px;
    left: 0;
    right: 0;
}


.flex-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    justify-content: center; /* center items vertically, in this case */
    align-items: center;     /* center items horizontally, in this case */
}

.flex-sidenav {    
    padding: 10px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    width: 200px;
    background: rgba(255, 0, 0, 0.5);    
}

.flex-footer {    
    max-height: 50px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    font-size: 12px;
    flex-direction: column;  /* make main axis vertical */
    justify-content: center; /* center items vertically, in this case */
    align-items: center;     /* center items horizontally, in this case */
}

Answer 1

您的容器设置为距文档底部 60 像素，但页脚的高度仅为 50 像素，留下 10 像素的间隙。

我会推荐阅读 this guide on flexbox ，因为它在底部包含一个示例，类似于您在不使用不必要的定位的情况下尝试实现的目标。