css flex 子元素溢出时,父元素被撑开解决方案

admin2024-07-03  8

当父元素使用flex: 1;自适应填满时,子元素内容溢出,父元素内容撑大,导致页面显示问题,或设置了overflow 为scroll 的元素没出现滚动条等问题

解决方案:

1.如果是横向排列,flex: 1;的元素加上width: 0; 此时会限制自适应的父元素不会溢出。

2.同上,如果是纵向排列,flex: 1;的元素是高度铺满的,那就加上height: 0; 则元素高度自适应的同事,高度不会被撑大。

3.无论多少层子元素,只要不想给限制的宽高,想让元素flex:1;自适应宽高,都一层层给flex为1时的元素 宽或高 为0限制下去。可以用于解决子元素溢出问题。父元素不会撑大后,给想出现scroll的元素这只滚动,则滚动条恢复正常。

.box{
    display: flex;
}

// 没有给宽度的元素
.aside{}

// 宽度自适应的元素
.main{
    width: 0; // 加上这个,该元素会自适应的同时,不会被main的子元素撑大宽度
    flex: 1;
    overflow-x: scroll;  // 由于不会被撑大,所以可以横向滚动
}



/** 或 */

.box{
    display: flex;
    flex-direction: column;

}

// 没有给高度的元素
.top{}

// 高度自适应的元素
.main{
    height: 0;  // 加上这个,该元素会自适应的同时,不会被main的子元素撑出高度
    flex: 1;
    overflow-y: scroll;  // 由于不会被撑高,所以可以竖向滚动
}

css flex 子元素溢出时,父元素被撑开解决方案,第1张

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明原文出处。如若内容造成侵权/违法违规/事实不符,请联系SD编程学习网:675289112@qq.com进行投诉反馈,一经查实,立即删除!