在 Flexbox 布局中，flex: 1 和 overflow: hidden 是两个常用的属性，它们组合使用可以有效地控制子元素的尺寸和内容显示。
flex: 1 的作用：
当子元素设置 flex: 1 时，它会根据 Flex 容器的主轴方向，自动伸缩以填充剩余的可用空间。这意味着子元素会尽可能地扩展其尺寸。
overflow: hidden 的作用：
overflow: hidden 属性用于处理元素内容溢出的情况。当内容超出元素边界时，该属性会裁剪掉超出部分，使其不可见，从而防止内容溢出到父元素之外。
结合使用 flex: 1 和 overflow: hidden 的效果：
将这两个属性同时应用于一个元素时，会产生以下效果：
- 动态尺寸调整： 子元素通过
flex: 1尝试扩展并占据父容器的所有可用空间。 - 内容溢出控制： 即使子元素的内容过多，超出了其计算后的尺寸，
overflow: hidden也会确保超出部分被隐藏，保持布局的整洁和结构的完整性。
总结来说，flex: 1 和 overflow: hidden 的结合使用，既能让子元素灵活地适应容器尺寸，又能有效防止内容溢出造成的布局混乱，保证了界面的美观和一致性。
