設定右邊元素flex：1，當右邊元素寬度超過父元素時，會造成右邊寬度溢位。

右邊多設定一個width:0或overflow:hiddlen後樣式正常。

為什麼設定flex: 1可以實現寬度自適應？

這與flex屬性的賦值語法有關，CSS屬性 flex 規定了彈性元素如何伸長或縮短以適應flex容器中的可用空間。這是一個簡寫屬性，用來設定 flex-grow, flex-shrink 與 flex-basis。具體的語法規則可以參考MDN

三種屬性比較好理解的分析參考：關於 Flex 中的 flex-grow、flex-shrink、flex-basis

flex: 1 = flex: 1 1 auto = flex-grow: 1

flex-grow屬性用於瓜分父容器的剩餘空間，在上面例子中，只有right設定了flex：1，所以它佔了剩餘空間的所有比例，實現了寬度的自適應。

對於為什麼子元素寬度會溢位的問題，網上查了一下只說是彈性佈局的特性以及父元素沒有一個固定的長度進行限制這兩個因素造成的，具體原因還不太清楚。。