使用grid布局，子元素overflow: hidden；属性失效

最新推荐文章于 2025-06-10 09:36:29 发布

程序小猿yy

最新推荐文章于 2025-06-10 09:36:29 发布

阅读量392

点赞数 2

CC 4.0 BY-SA版权

文章标签： css 前端 html

本文链接：https://blog.csdn.net/y6868/article/details/144750621

当我们使用grid布局时，比如把三个div平均分成三份，如下图代码，此时子元素属性overflow: hidden;是生效的。

<div class="cont">
     <div class="deo">内容1内容1内容1内容1内容1内容1内容1内容1</div>
     <div class="deo">内容1</div>
     <div class="deo">内容1</div>
</div>

.cont{
   display: grid;
   grid-template-columns: repeat(3,1fr);
   height: 40px;
}

.deo{
   overflow: hidden;
}

但是，当父元素添加属性place-items: center/left等;或者justify-items: center/left等"时，此时的子元素overflow: hidden;便不生效了。解决办法如下图代码所示：

<div class="cont">
     <div class="deo">内容1内容1内容1内容1内容1内容1内容1内容1</div>
     <div class="deo">内容1</div>
     <div class="deo">内容1</div>
</div>

.cont{
   display: grid;
   grid-template-columns: repeat(3,1fr);
   height: 40px;
   place-items: center"//当父元素添加该属性时，
   //justify-items: center"//或者当父元素添加该属性时
}

.deo{
   overflow: hidden;
   max-width:100%;//给子元素添加一个最大宽度，或者一个具体的宽度即可解决overflow: hidden;不生效这个问题。
}