当父级元素设置了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); // 关键代码 设置最小宽度和最大宽度 可以防止子元素溢出
          }
      }