display: flex; 超出不隐藏

`display: flex` 是 CSS3 中用于创建弹性布局的一种方式，它与 `display: box`（现在通常被称为 `display: grid`）的主要区别在于灵活性和容器元素的控制程度。当设置了 `display: flex` 后，如果内容超过父元素的大小，通常情况下会进行换行或者拉伸以适应空间，而默认的 `overflow` 属性为 `auto`，这意味着超出的内容会被显示出来，除非你手动更改。

关于超出内容不隐藏的情况，如你在引用[2]中提到的，当你在具有 `display: flex` 的父元素下设置 `overflow: hidden` 时，这可能不会生效，因为flex布局倾向于扩展其内容区域。解决方法包括：

1. **针对子元素**：

   .child-element {
     width: 0;
     /* 或者 */
     flex: none; /* 不让子元素自动调整大小 */
   }

2. **对父元素**：
如果要阻止内容溢出并保持隐藏，你可以直接改变父元素的 `overflow` 属性为 `hidden`：

   .parent-with-flex {
     overflow: hidden;
   }

请注意，如果你希望在 flex 容器内部限制某个方向上的溢出，而不是整个容器，那么可能需要配合其他技巧来实现，比如使用 `position: relative` 和绝对定位的子元素来控制溢出部分。