当父级元素设置了flex 布局 ，两个子元素都设置了flex :1, 但是当子元素放不下的时候会溢出父元素怎么解决 （css 样式问题）
一、问题
遇到个样式问题，当父级元素设置了flex 布局 ，两个子元素都设置了flex :1, 但是当子元素放不下的时候会溢出父元素怎么解决 （拖拽浏览器 使页面变小）
二、解决方法
.father{
min-height: 600px;
width: 100%;
display: flex;
gap: 12px;
&-left {
flex: 1;
min-width: 0; // 关键代码 设置最小宽度和最大宽度 可以防止子元素溢出
max-width: calc(50% - 6px); // 关键代码 设置最小宽度和最大宽度 可以防止子元素溢出
}
&-right {
flex: 1;
min-width: 0; // 关键代码 设置最小宽度和最大宽度 可以防止子元素溢出
max-width: calc(50% - 6px); // 关键代码 设置最小宽度和最大宽度 可以防止子元素溢出
}
}