目录
正常现象
使用grid布局使得左右两边的元素均分，实现效果
css
<style> .container { height: 500px; background-color: aliceblue; display: grid; grid-template-columns: repeat(2, 1fr); /* 方式一： */ /* grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); */ } .item { border: 1px solid #d0d0d0; padding: 10px; box-sizing: border-box; color: #fff; line-height: 478px; /* 方式二： */ /* min-width:0 */ /* 方式三： */ /* overflow: hidden; */ } .inner { height: 100%; overflow-y: auto; font-size: 80px; text-align: center; background-color: green; } .inner--overflow { width: 1000px; } </style>
html
<div class="container"> <div class="item"> <div class="inner">1</div> </div> <div class="item"> <div class="inner">2</div> </div> </div>
不均分现象
不过，出现了一个问题，当其中一个元素内部的宽度比较大时，会出现不均分的现象
<div class="container"> <div class="item"> <div class="inner">1</div> </div> <div class="item"> <!-- 增加一个宽度 --> <div class="inner inner--overflow">2</div> </div> </div>
解决方式
方式一
.container { height: 500px; background-color: aliceblue; display: grid; /* 方式一： */ /* grid-template-columns: repeat(2, 1fr); */ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
方式二
.item { border: 1px solid #d0d0d0; padding: 10px; box-sizing: border-box; color: #fff; line-height: 478px; /* 方式二： */ min-width:0 }
方式三
.item { border: 1px solid #d0d0d0; padding: 10px; box-sizing: border-box; color: #fff; line-height: 478px; /* 方式三： */ overflow: hidden; }
参考
