需求
两个树要自然展开宽度 且input宽度与它们的总宽度相同
分析
这个区域使用纵向flex布局.为了让下层元素都自然展开,交叉轴采用flex-start
考虑将容器宽度设为自适应 由下方组件撑开容器 取消flex-start,input占据整行空间即可
解决
有三个方法可以把容器宽度设为自适应
- 用inline-block的元素包裹容器
- 将容器设置为display:inline-flex
- 将容器设置为width:max-content(或者fit-content,min-content) 本来想探究一下其中的原理 但是css的内容实在太丰富 遂作罢
