flex-basis 影響嵌套 flex 容器中同級項目的大小

Question

我有一個嵌套的彈性布局。

這是我的代碼筆鏈接https://codepen.io/mendoncafiles/pen/oNoGbPa

有一個彈性容器，里面有列表項。 每個列表項都是一個 flex，帶有I標簽和SPAN標簽作為 flex 項。 I標簽的flex-basis為 30px。

最后一個列表項中的文本換行到下一行。 文本顯示在單行中，有兩個選項：

1. 從包裝DIV中刪除 display: flex
2. 將flex-basis: 30px更改為width: 30px到I標簽。

預期的：

問題：

Answer 1

看起來問題在於瀏覽器在考慮跨度的全長之前正在確定容器的大小。

您可以禁用flex-shrink或在span上使用white-space: nowrap 。 但這會導致溢出。

考慮在頂級 flex 容器或ul上設置最小寬度。