display:flex 下 overflow: hidden 不生效的；

overflow: hidden; 在使用 display: flex; 时不生效的问题通常是由于 Flexbox 布局的特性导致的。Flex 项目（子元素）默认扩展以填充任何可用空间，这可能会覆盖 overflow: hidden; 规则。

为了解决这个问题，你可以在 Flex 容器上使用 overflow: hidden;，并且确保 Flex 子项不会超过容器的大小。你可以通过设置 min-width 或 max-width 来控制子项的大小，或者在子项上使用 overflow: auto; 来提供滚动条。

以下是一个简单的例子：

<div class="flex-container">
  <div class="flex-item">
    这里是内容可能会超出容器的大小，如果超出了容器，这部分内容应该被隐藏。
  </div>
</div>

.flex-container {
  display: flex;
  overflow: hidden; /* 应用在容器上 */
}
 
.flex-item {
  min-width: 0; /* 防止子项的 min-width 默认值产生的影响 */
  flex: 1; /* 或其他任何需要的 Flexbox 属性 */
  overflow: auto; /* 如果需要滚动条，可以在子项上使用 */
}

在这个例子中，overflow: hidden; 应用在了 Flex 容器上，而 overflow: auto; 可以用来在子项内容超出时提供滚动。min-width: 0; 确保 Flex 子项的宽度不会被默认的最小宽度规则影响。