Flex布局下，父元素高度固定导致padding-bottom失效的解决方法
在使用Flex布局时，如果父元素设置了固定高度，而子元素又使用了flex: 1和overflow-y: scroll，则padding-bottom可能会失效。这是因为子元素受限于父元素的固定高度，无法因padding-bottom而撑大父元素。
问题描述：
以下HTML代码中，父元素.p设置了固定高度：
当子元素使用Flex布局且overflow-y: scroll时，padding-bottom将无效。
根本原因：
Flex容器的高度固定，子元素无法扩展超出父容器边界。padding-bottom试图增加子元素的高度，但由于父容器高度限制，导致内容被裁剪，从而使padding-bottom失效。
解决方案：
将父元素的min-height属性设置为0，允许子元素的高度不受限制地扩展：
.p {
min-height: 0;
}
通过设置min-height: 0，Flex容器不再限制子元素的最小高度，从而允许padding-bottom生效，使滚动条正确显示。
模拟el-dialog布局的方案：
如果需要实现类似el-dialog的布局效果，即在body区域设置padding，但padding-bottom无效的情况，建议在body区域外嵌套一个div来处理padding：
.dialog {
display: flex;
flex-direction: column;
height: 400px; /* 或其他固定高度 */
}
.body {
flex: 1;
overflow-y: auto; /* 或scroll */
}
.content {
padding: 20px;
}
通过这种方式，.content的padding将被正确应用，并且不会影响到.body的滚动行为。 .body占据剩余空间，而.content在.body内部使用padding。
通过以上方法，可以有效解决Flex布局中padding-bottom失效的问题，并实现预期布局效果。
