width: max-content的理解和使用

1,052 阅读1分钟

前言
在使用Ant Ddesign ProComponent的时候,发现一个有趣的属性,可以快捷的解决列数过多导致排列不整齐的问题。

代码

<ProTable<TableProps>
  scroll={{ x: 'max-content' }}
/>

对比
添加前:

image.png

添加后:

image.png

分析
看起来是不是整齐多了?scroll={{ x: 'max-content' }}做了哪些改变呢?

比前后样式,发现它做了两处改变:

  1. class为ant-table-content的div元素添加了内联样式overflow: auto hidden;
  2. table元素上添加了width: max-content; min-width: 100%;

解释
一方面让class为ant-table-content的div元素在内容超出其现有宽度时可以允许内部元素横向去滚动,另一方面使用width: max-content;这个属性

max-content
max-content的行为表现可以这么理解,假设我们的容器有足够的宽度,足够的空间,此时,所占据的宽度是就是max-content所表示的尺寸。