ant-design Warning modal width 'max-content' / 'fit-content' adds unwanted space, used to work OK on ant v4

vd2z7a6w  于 5个月前  发布在  其他
关注(0)|答案(4)|浏览(57)

Steps to reproduce

Create a warning Modal
Add width: 'fit-content' or 'max-content'

What is expected?

Modal width should fit the content width

What is actually happening?

Modal width has extra unwanted space on the right side in v5
| Environment | Info |
| ------------ | ------------ |
| antd | 5.5.1 |
| React | React 17.0.2 |
| System | macOS 12.5.1 |
| Browser | Chrome 113.0.5672.126 |

Width works ok on ant v4:
https://codesandbox.io/s/antd-reproduction-template-forked-rkucir?file=/index.js
Width doesn't work on on ant v5:
https://codesandbox.io/s/antd-reproduction-template-forked-mnnnl2?file=/index.js

db2dz4w8

db2dz4w82#

Seems a flex layout bug of width calculation. fit-content takes multiple line width in sum.

t3psigkw

t3psigkw3#

as @zombieJ say, It is due to display: flex
we need a css master to adjust it
It's decided to be you, bean paste @zombieJ

watbbzwu

watbbzwu4#

Seems a flex layout bug of width calculation. fit-content takes multiple line width in sum.

In early refactor, we use flex to reduce the complex css struct and refactor of dom structure. But seems for this case, it have to use dom structure to handle this.

相关问题