解决左边宽度固定，右边宽度随浏览器自适应的3种方案
前言一、使用 flex 布局三、使用 flex + min-width二、使用 float 浮动四、总结前言
在前端开发中，不管是自己写项目，还是应试，都会遇到这样一个问题，实现左边宽度固定，右边宽度随浏览器的变化而变化，在这个问题上衍生出来的还有一种场景，明明设置了固定宽度，却出现变形的现象，今天就给大家分享一下解决方案。
一、使用 flex 布局
思路：
父元素设置 display:flex；左边元素给固定的 flex-basis 属性值；右边元素设置 flex-grow 为 1 或者 flex 为 1。
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/></head><style type="text/css">.box{height: 100px;display: flex;}.left{flex-basis: 100px;background-color: silver;}.right{flex-grow: 1;background-color: pink;}</style><body><div class="box"><div class="left"></div><div class="right"></div></div></body></html>
三、使用 flex + min-width
思路：
父元素设置 display:flex；左边元素设置最小宽度 min-width 属性值；右边元素可设置 flex-grow 为 1 或者 flex 为 1 或者宽度 100%，填充剩余空间。（这里注意只有左边设置最小宽度的时候，右边才能使用100%）。
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/></head><style type="text/css">.box{display: flex;}.left{min-width: 100px;height:100px;background-color: silver;}.right{width: 100%;height:100px;background-color: pink;}</style><body><div class="box"><div class="left"></div><div class="right"></div></div></body></html>
二、使用 float 浮动
思路：
左边元素浮动，设置固定的宽度；右边元素设置 margin-left 距离为左边元素宽度；
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/></head><style type="text/css">.left{float: left;width: 100px;height:100px;background-color: silver;}.right{margin-left:100px;height: 100px;background-color: pink;}</style><body><div><div class="left"></div><div class="right"></div></div></body></html>
