in compatibility mode (extreme mode and Google and Firefox are normal), the browser uses display:flex;overflow-y:auto to set the style, and there is a Y-axis scroll bar, why is there still element squeezing? This is shown in figure 1 below. Figure 2 does not exceed the content, nor does it show the Y axis, but the style is normal. The following is the style code, please give me some advice!
.el-checkbox-group{
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
padding: 10px 8px;
height: 450px;
overflow-y: auto;
label{
display: block;
line-height: 38px;
height: 38px;
//height: auto;
cursor: default;
.el-checkbox__label{
font-size: 18px;
font-weight: normal;
cursor: pointer;
color: -sharp409EFF;
text-decoration: underline;
cursor: default;
.game_id{
display: inline-block;
margin-right: 42px;
color: -sharp666;
text-decoration: none;
}
a{
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 140px;
}
}
.el-checkbox__input{
float: right;
cursor: pointer;
margin-top: 10px;
}
}
.el-checkbox__label{
cursor: default;
}
.el-checkbox{
margin-left: 0;
}
}