css flex 子元素溢出时，父元素被撑开解决方案

在CSS Flexbox布局中，如果子元素内容溢出，并且不想让父元素随之撑开，可以使用overflow属性来控制溢出内容的显示方式，并结合min-width属性确保子元素在内容溢出时有一个最小的可见宽度。

以下是一个简单的示例：

.flex-container {
  display: flex;
  width: 200px; /* 设定父元素的宽度 */
  background-color: lightblue; /* 设置背景色，便于观察 */
  overflow: hidden; /* 防止子元素溢出时影响父元素的大小 */
}
 
.flex-item {
  flex: 1;
  min-width: 0; /* 防止Flex项目的最小宽度被默认的min-width规则覆盖 */
  overflow: auto; /* 当内容溢出时显示滚动条 */
  word-break: break-word; /* 防止长单词或URL导致的溢出 */
}

<div class="flex-container">
  <div class="flex-item">
    这是一段很长的文本内容，如果内容足够多并且超出了父元素的宽度，则不会导致父元素的宽度变化。
  </div>
</div>

在这个示例中，.flex-container是一个Flex容器，它的宽度被固定为200px。.flex-item是Flex子元素，它允许内容溢出并显示滚动条，而不会影响.flex-container的大小。