当你使用 flex 布局时，设置子元素的flex属性为1会使该子元素尝试占据父元素中所有可用的空间。然而，当子元素的子元素（C）宽度超出父元素（B）的宽度时，它不会自动调整大小以适应父元素，因为默认情况下，flex 子元素不会根据其内容的大小缩小。

要解决这个问题，你可以尝试以下几种方法：

方法1：限制子元素的最大宽度

你可以给子元素B设置一个最大宽度（max-width），这样即使子元素C的宽度超过了子元素B的宽度，子元素B也不会无限撑开。

子元素B{flex:1;max-width:100%;}

方法2：使用min-width

另一种解决方案是在子元素B上设置min-width为0。这告诉浏览器允许子元素B的大小缩小到其内容的大小，即使这意味着它的大小将小于其默认的最小内容大小。

子元素B{flex:1;min-width:0;}

方法3：调整 flex 子项的内容

如果可能的话，你可以尝试调整子元素C的内容，使其不会超出其父元素的宽度。这可能涉及到调整字体大小、缩短文本、使用换行等策略。

方法4：使用overflow

如果你想让子元素C的内容在超出其父元素时出现滚动条，你可以使用overflow属性：

子元素C {width:100%;overflow: auto;}

你可以根据具体情况选择最适合你需求的方法。