當(dāng)你使用 flex 布局時(shí)，設(shè)置子元素的flex屬性為1會(huì)使該子元素嘗試占據(jù)父元素中所有可用的空間。然而，當(dāng)子元素的子元素（C）寬度超出父元素（B）的寬度時(shí)，它不會(huì)自動(dòng)調(diào)整大小以適應(yīng)父元素，因?yàn)槟J(rèn)情況下，flex 子元素不會(huì)根據(jù)其內(nèi)容的大小縮小。

要解決這個(gè)問題，你可以嘗試以下幾種方法：

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

你可以給子元素B設(shè)置一個(gè)最大寬度（max-width），這樣即使子元素C的寬度超過了子元素B的寬度，子元素B也不會(huì)無限撐開。

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

方法2：使用min-width

另一種解決方案是在子元素B上設(shè)置min-width為0。這告訴瀏覽器允許子元素B的大小縮小到其內(nèi)容的大小，即使這意味著它的大小將小于其默認(rèn)的最小內(nèi)容大小。

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

方法3：調(diào)整 flex 子項(xiàng)的內(nèi)容

如果可能的話，你可以嘗試調(diào)整子元素C的內(nèi)容，使其不會(huì)超出其父元素的寬度。這可能涉及到調(diào)整字體大小、縮短文本、使用換行等策略。

方法4：使用overflow

如果你想讓子元素C的內(nèi)容在超出其父元素時(shí)出現(xiàn)滾動(dòng)條，你可以使用overflow屬性：

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

你可以根據(jù)具體情況選擇最適合你需求的方法。