使用flex的垂直居中对齐时，溢出滚动条，内容显示不全

花笙_

已于 2023-02-07 14:27:34 修改

阅读量2.3k

点赞数 4

分类专栏： css 文章标签： css css3 html

于 2023-02-07 14:25:50 首次发布

本文链接：https://blog.csdn.net/wang_59881/article/details/128917449

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

场景：
使用flex垂直居中对齐，div内的三个盒子长度未知，由内容撑开，超出父盒子宽度后滚动条显示，最左侧盒子内容会显示不全
例：
在这里插入图片描述
正常box1盒子应该是红色宽度，用了flex的缘故，只显示了黄色部分，超出部分隐藏了
查看代码：

<div class="center">
	<div class="box1">11111111111111111111111111111111111111</div>
    <div class="box2">22222222222222222222222222222222222222</div>
    <div class="box3">33333333333333333333333333333333333333</div>
</div>
<style>
    .center{
        border: 1px solid red;
        overflow: auto;
        margin-left: 100px;
        width: 800px;
        height: 400px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .center div{
        height: 100px;
    }
    .box1{
        background: skyblue;
    }
    .box2{
        background: darkseagreen;
    }
    .box3{
        background: pink;
    }
</style>

解决方案：
用inline-flex替代flex，在flex父级再添加一个div盒子，设置最小宽度
修改后

.center{
        width: 800px;
        border: 1px solid red;
        overflow: auto;
        margin-left: 100px;
    }
    .box{
        min-width: 800px;
        height: 400px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .box div{
        height: 100px;
    }
    .box1{
        background: skyblue;
    }
    .box2{
        background: darkseagreen;
    }
    .box3{
        background: pink;
    }
</style>
<body>
  <div class="center">
    <div class="box">
        <div class="box1">11111111111111111111111111111111111111</div>
        <div class="box2">22222222222222222222222222222222222222</div>
        <div class="box3">33333333333333333333333333333333333333</div>
    </div>
  </div>
</body>

修改后的样式
在这里插入图片描述
最左侧完美展示

宽度不超过父盒子宽度时也是居中展示，超过后也能正常显示最初左侧数据

延伸：
flex：将对象作为弹性伸缩盒显示
inline-flex：将对象作为内联块级弹性伸缩盒显示
在这里插入图片描述

代码：

<style>
    .mainBox{
        background: skyblue;
        display: flex;   // 父盒子为flex不设置宽度默认是100%显示；父盒子为inline-flex不设置宽度，默认宽度为子盒子撑开的宽度
    }
    .mainBox>div{
        height: 100px;
        width: 100px;
        border: 1px solid #000;
    }
</style>
<body>
    <div class="mainBox">
        <div>11</div>
        <div>22</div>
    </div>
</body>

花笙_

关注

4
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
使用flex的垂直居中对齐时，溢出滚动条，内容显示不全

使用flex垂直居中对齐，div内的三个盒子长度未知，由内容撑开，超出父盒子宽度后滚动条显示，最左侧盒子内容会显示不全。用inline-flex替代flex，在flex父级再添加一个div盒子，设置最小宽度。正常box1盒子应该是红色宽度，用了flex的缘故，只显示了黄色部分，超出部分隐藏了。宽度不超过父盒子宽度时也是居中展示，超过后也能正常显示最初左侧数据。inline-flex：将对象作为内联块级弹性伸缩盒显示。flex：将对象作为弹性伸缩盒显示。
复制链接

扫一扫