左边目录固定宽度，右边自动填充
参考：
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覆盖掉
5.0 flex-basis 与其他宽度之间的关系
https://www.jianshu.com/p/bd7d1597d12d
max-width min-width等级优先
如果容器宽度不足：缩小
如果容器宽度足够：flex-basis优先于width
6 如果设置felx-wrap为wrap
就不会缩小，会换行
