Flexbox Row + OverflowX issue

2024年5月24日 · 閱讀時間約 1 分鐘

Imagine Chiu

Front End Engineer @ Bearests

在用 Flexbox 排版時，有時候會遇到類似的問題，內容物當 overflow 時無法撐開, 導致背景無法顯示完整區塊

Flex(Row) + Overflow-x issue

向右捲動檢查 overflow-x問題，背景顏色不是全寬

CurrentRank

11~20

x1.60%

x1.70%

x1.80%

x1.90%

x2.00%

Next Level

Friends Rolling

Rebate

Number Withdrawal

Friends Rolling

Next Rank

21~30

x1.60%

x1.70%

x1.80%

x1.90%

x2.00%

<section className="d-flex flex-column overflow-X">
  <div>curr level</div>
  <div>title</div>
  <div>next level</div>
</section>

修正後的版本

向右捲動檢查，背景顏色全寬，主要將 flex column 跟 overflow-x 隔開

CurrentRank

11~20

x1.60%

x1.70%

x1.80%

x1.90%

x2.00%

Next Level

Friends Rolling

Rebate

Number Withdrawal

Friends Rolling

Next Rank

21~30

x1.60%

x1.70%

x1.80%

x1.90%

x2.00%

<section className="d-flex overflow-X">
  <div className="flex-column">
      <div>curr level</div>
      <div>title</div>
      <div>next level</div>
  </div>

</section>

Flex(Row) + Overflow-x issue​

修正後的版本​

Flex(Row) + Overflow-x issue

修正後的版本