-webkit-box-flex 属性 组件长/宽偏差

背景：有四个表格，按照田字排列，长宽五五开。同时，有两个表格可能会随着配置项不显示，这个时候，旁边的表格就要填满不显示的表格所在的空白，所以表格的长或宽就要自适应了，就要用到**-webkit-box-flex**属性了。如图。

1、2、3、4四个表格，按需求应该是等高的。实际1、3等宽，比2、4要稍宽，这个是需要，暂且不管。
问题是，2、4等高，但1比3高几个像素。本来几个像素区别不大，但是旁边2、4等宽，一眼就看出参差不齐

这几个表格是这么布局的。在总div里横向排序两个div,两个div不等宽，这两个div内部分别纵向排序，即1、3纵向排序，2、4纵向排序。
表格1内部有内容，所以1和3在写法上是等高的，但是实际有几个像素的出入。
css代码

.spLeftContentTopRight{
	height: 100%;
	width: calc(67% - 10px);
	float: left;
	display: -webkit-box;
	-webkit-box-orient: horizontal;
	.spLeftContentTopRightLeft{	
	  width: calc(50% + 20px);
	  height: 100%;
	  display: -webkit-box;
	  -webkit-box-orient: vertical;
	  .childGrid{//1,3表格
		-webkit-box-flex: 2;//各个元素比例
		//-webkit-box-flex值相同时，有内容的一边会更大一点，
		//加个属性height(纵向排列时)/width(横向排列时)，随便给个值，两个部分就会一样长/宽
		// height:1px;
		margin-top: 10px;
	  }
	}
	.spLeftContentTopRightRight{
	  width: calc(50% - 30px);
	  height: 100%;
	  display: -webkit-box;
	  margin-left: 10px;
	  -webkit-box-orient: vertical;
	  .childGrid{//2,4表格
		-webkit-box-flex: 2;//各个元素比例
		margin-top: 10px;
	  }
	}
}

在网上找到了原因，也解决了¹。但是还是有点不能理解，先记录着吧
原因：表格1内有内容，所以撑开了表格，多几个像素。
解决方法：给个高度height属性，随便给个值就行。（不太能理解）

注意：如果是纵向排列，那么就给高度，因为父div设置的自适应的方向是纵向；如果是横向排列，那么就设置width。

特别鸣谢：网友Lieber-l

---

1. 参考博客：https://www.cnblogs.com/lbcheng/p/6044373.html ↩︎