左边目录固定宽度，右边自动填充

参考：

https://www.jb51.net/css/715855.html

1 float + overflow:hidden

主要通过 overflow 触发 BFC,而 BFC 不会重叠浮动元素。
由于设置 overflow:hidden 并不会触发 IE6-浏览器的 haslayout 属性，所以需要设置 zoom:1 来兼容 IE6-浏览器。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>TEST</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}
			.box {
				height: 100vh;
			}
			.child1 {
				background-color: antiquewhite;
				height: 100%;
				width: 200px;
				float: left;
			}
			.child2 {
				background-color: aqua;
				height: 100%;
				overflow: hidden;
				zoom: 1;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="child1"></div>
			<div class="child2"></div>
		</div>
	</body>
</html>

2 float: left+ margin-left

修改child2元素：

.child2 {
				background-color: aqua;
				height: 100%;
				margin-left: 200px;
			}

3 容器relative定位，左元素absolute定位，右元素margin-left

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>TEST</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}
			.box {
				height: 100vh;
				position: relative;
			}
			.child1 {
				background-color: antiquewhite;
				height: 100%;
				width: 200px;
				position: absolute;
			}
			.child2 {
				background-color: aqua;
				height: 100%;
				margin-left: 200px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="child1"></div>
			<div class="child2"></div>
		</div>
	</body>
</html>

4 flex布局

父元素使用flex布局，左元素固定大小，右元素flex:1

<style>
			* {
				padding: 0;
				margin: 0;
			}
			.box {
				height: 100vh;
				display: flex;
			}
			.child1 {
				background-color: antiquewhite;
				height: 100%;
				width: 200px;
			}
			.child2 {
				background-color: aqua;
				height: 100%;
				flex: 1;
			}
		</style>

5 flex 的值是什么意思

https://blog.csdn.net/fengyjch/article/details/79047908

	flex-grow	flex-shrink	flex-basis
默认 (flex:1 容器宽度不够的时候会缩小 )	0	1	auto
none （任何情况都不会收缩）	0	0	auto
auto （根据主轴自动收缩）	1	1	auto
一个非负数字	这个数字	1	0%
一个长度/百分比	1	1	这个长度/百分比
两个非负数字	第一个数字	第二个数字	0%
一个非负数字，一个长度/百分比	第一个数字	1	这个长度/百分比

PS:

剩余空间：父容器在主轴方向上的可用空间
flex-grow、flex-shrink设置为负值无效
flex-grow：空间有剩余的时候，如何分配剩余空间
flex-shrink：空间不足的时候，怎么缩小(flex默认不换行，因为flex-wrap默认值是nowrap。除非flex-wrap设置为wrap)
flex-basis：定义了在分配多余空间之前，项目占据的主轴空间。当元素同时设置了width和flex-basis时，width的值会被flex-basis覆盖掉