CSS父元素适配子元素宽度：如何让body与row宽度一致？

要让.body元素的宽度和内部.row保持一致，有几种简单的CSS实现方式：

方法1：使用width: fit-content #

给.body元素设置width: fit-content，它会自动适配子元素的宽度；同时加上min-width: 100%，确保当.row宽度小于容器时，.body依然占满容器宽度。

修改后的代码示例：

<div style={{ width: 700, overflow: 'auto' }} className='table'>
    <div className='body' style={{ width: 'fit-content', minWidth: '100%' }}>
      <div style={{ width: 1400 }} className='row' />
    </div>
</div>

如果用单独的CSS类：

.body {
  width: fit-content;
  min-width: 100%;
}

方法2：使用inline-block布局 #

将.body设置为display: inline-block，这类元素会根据内容宽度自适应；同样搭配min-width: 100%处理边界情况：

.body {
  display: inline-block;
  min-width: 100%;
}

方法3：借助Grid布局 #

给外层.table容器添加display: grid，Grid容器的子元素会自动匹配内部内容的宽度，同时不影响容器的横向滚动效果：

<div style={{ width: 700, overflow: 'auto', display: 'grid' }} className='table'>
    <div className='body'>
      <div style={{ width: 1400 }} className='row' />
    </div>
</div>

以上几种方法都能实现.body宽度与.row同步的需求，你可以根据自己的布局场景选择最合适的方式。

内容的提问来源于stack exchange，提问作者Neopolitan