flex 与 overflow 冲突

豪华手抓饼

已于 2024-06-28 14:27:16 修改

阅读量253

点赞数 4

分类专栏： # HTML/CSS 问题记录文章标签： css

于 2024-06-27 11:11:39 首次发布

本文链接：https://blog.csdn.net/lihaogn/article/details/140008339

版权

问题记录同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

HTML/CSS

2 篇文章 0 订阅

订阅专栏

问题场景：

父盒子高度会变化，可能会比子盒子大，也可能会比子盒子小。

比子盒子大的时候，希望子盒子垂直居中；
比子盒子小的时候，能够正常滚动；

在这里插入图片描述

<body>
  <div class="outer">
    <div class="inner">12</div>
  </div>
</body>

当子盒子大于父盒子的时候：

<style>
.outer {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    background-color: antiquewhite;
}
.inner {
    width: 20px;
    height: 100px;
    background-color: aqua;
}
</style>

问题：子盒子最上面会有一部分内容显示不出来。

在这里插入图片描述

解决：

方案1 修改 outer 的 align-items

.outer {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: safe center; /* 加上safe */
    justify-content: center;
    overflow-y: auto;
    background-color: antiquewhite;
}

safe

与其它对齐值一起使用。如果所选对齐值导致元素溢出容器，则将元素按 start 方式对齐。

方案2 outer 不使用 align-items，inner 使用 margin

<style>
.outer {
    width: 50px;
    height: 50px;
    display: flex;
    /* align-items: center; */
    justify-content: center;
    overflow-y: auto;
    background-color: antiquewhite;
}
.inner {
    width: 20px;
    height: 100px;
    background-color: aqua;
    margin: auto; /* 添加 margin */
}
</style>