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

在下面的GIF中，可以看到，当我将

高度设置为footer元素时，布局会在sidenav和footer之间添加一个空格


这里有什么问题？如果没有此行为，如何更改页脚元素的高度？我的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 */
}

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

我建议阅读，因为它在底部包含一个示例，与您在不使用不必要的定位的情况下试图实现的目标类似。
HTML代码如何？为什么是最大高度？只需使用高度。另外，它可能是固定的位置，您可以使用flexboxWhy-1更轻松地创建粘性页脚布局？这个问题很清楚，表述得很好。这是正确的，只是缺乏关注。谢谢你的回答！提到的链接，很好，我已经知道了。