el-col在浏览器放大缩小时高度产生小幅度变化问题

在使用  Vue  的  Element UI  的  el-col  栅格系统时，出现浏览器放大缩小时高度有变化的情况，可能是由于  flex  布局计算误差导致的。

该问题可以通过设置  flex  布局属性为  flex-shrink: 0;  的方式解决。 flex-shrink: 0;  属性可以明确告诉浏览器不允许在空间不足的情况下缩小元素的大小。

示例如下：

 
<template>
  <el-row>
    <el-col :span="12" class="item">col-12</el-col>
    <el-col :span="12" class="item">col-12</el-col>
  </el-row>
</template>

<style>
.el-row {
  display: flex;
  flex-wrap: wrap;
}
.el-col.item {
  flex-shrink: 0;
  border: 1px solid #dcdfe6;
  background-color: #f1f1f1;
}
</style>
 

在上面的示例中，我们设置  el-row  为  flex  布局，然后将  el-col  样式中的  flex-shrink  设置为  0 ，这样就可以解决在浏览器放大缩小时  el-col  的高度发生变化的问题。