场景:
现在页面中存在4个盒子,
其中两个盒子为固定宽度,
另外两个盒子对剩余空间进行等分,并且根据内容进行滚动条显示
期望的效果:
尝试使用flex布局实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.far>div { height: 28px; }
</style>
</head>
<body>
<div style="display: flex;" class="far">
<div style="border: 1px solid red; flex: 0 0 200px;">
200px
</div>
<div style="border: 1px solid blue; flex: auto;">
<div style="width: 100%; overflow-x: scroll;">
overflow-x: scroll
</div>
</div>
<div style="border: 1px solid gold; flex: 0 0 200px;">
200px
</div>
<div style="border: 1px solid blue; flex: auto;">
<div style="width: 100%; overflow-x: scroll;">
overflow-x: scroll
</div>
</div>
</div>
</body>
</html>
这样看起来实现了,但是当div中的内容多起来的时候页面布局发生了改变
当文字多起来后,盒子随着内容进行了改变,这并不是我们希望的效果
解决方案:
在flex:auto
后添加width:0
设置下宽度,可以为其他值(不太清楚是什么原因,有大神知道的话留个言谢谢),最终将html中代码修改如下
<div style="display: flex;" class="far">
<div style="border: 1px solid red; flex: 0 0 200px;">
200px
</div>
<div style="border: 1px solid blue; flex: auto; width: 0;">
<div style="width: 100%; overflow-x: scroll;">
overflowxscrolloverflowxscrolloverflowxscrolloverflowxscroll
</div>
</div>
<div style="border: 1px solid gold; flex: 0 0 200px;">
200px
</div>
<div style="border: 1px solid blue; flex: auto; width: 0;">
<div style="width: 100%; overflow-x: scroll;">
overflowxscrolloverflowxscrolloverflowxscrolloverflowxscroll
</div>
</div>
</div>
最终效果:
在flex: auto;
后面添加width: 0;
后,即达到了想要的不管两个auto
的盒子内容有多少都不会影响页面中的布局。
同理如果是flex-direction:column
纵向布局,添加设置height: 0
即可