【display:flex】弹性布局，父元素设置display:flex后子元素的宽度太大撑大了父元素的宽度

时间 2021-07-14

最近做一个现货平台的项目，需要展示的数据超多，不是table就是chart，布局需要弹性自适应，所以使用了css3的flex布局方案。

先看下界面：

就上边界面来说，主要分左右两大部分，各部主体都是table，用的是ant-design的table插件。主要需求是页面布局要弹性，右边表格的中间部分（如果所示，其中的“1月可买卖”，“2月可买卖”，......“11月可买卖”，“12月可买卖”）是要能左右滚动的，这个好说，ant-design-table 组件有固定列的方法：设置固定列的fixed属性和需要滚动区域的scroll.x 属性。

问题就在于：

当两个table的父元素设为 display:flex 后，如果设置的scroll.x的值大于父元素的宽度减去左边容器的宽度，则右边容器的宽度会被撑大。

【解决方法】

父元素设置display:flex;右边容器设置flex:1;width:0;

（提示：上述解决方法适用于博主所述的场景，不能保证100%适用，如果有疑问，欢迎在下方留言交流）

以下代码可供参考：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>flex-弹性布局</title>
	<style>
		.content{
			display : flex;
		}
		
		.left-table{
			width : 200px;
		}
		
		.right-table{
			flex : 1;
			width : 0;
		}
	</style>
</head>
<body>
	<div class="content">
		
		<div class="left-table">
			<table>左边Table</table>
		</div>
		
		<div class="right-table">
			<table>右边Table</table>
		</div>
		
	</div>
</body>
</html>