跳至主要内容

Flexbox Row + OverflowX issue

· 閱讀時間約 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%
x2.00%
x2.00%
x2.00%
x2.00%
Next Level
Friends Rolling
Rebate
Number Withdrawal
Friends Rolling
Friends Rolling
Friends Rolling
Friends Rolling
Friends Rolling
Friends Rolling
Next Rank
21~30
x1.60%
x1.70%
x1.80%
x1.90%
x2.00%
x2.00%
x2.00%
x2.00%
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%
x2.00%
x2.00%
x2.00%
x2.00%
Next Level
Friends Rolling
Rebate
Number Withdrawal
Friends Rolling
Friends Rolling
Friends Rolling
Friends Rolling
Friends Rolling
Friends Rolling
Next Rank
21~30
x1.60%
x1.70%
x1.80%
x1.90%
x2.00%
x2.00%
x2.00%
x2.00%
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>