Flexbox Row + OverflowX issue

May 24, 2024 · One min read

Front End Engineer @ Acrool

When using Flexbox for typesetting, you sometimes encounter a similar problem. The content cannot be stretched when it overflows, causing the background to be unable to display the entire block.

Flex(Row) + Overflow-x issue

scroll right check the overflow-x issue, background color not full width

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>

Fix version

scroll right check, background color full width, mainly separate flex column from 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​

Fix version​

Flex(Row) + Overflow-x issue

Fix version