Why does element squeeze still occur when browsers are styled with display:flex;overflow-y:auto in compatibility mode?

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;
                            }
                        }

clipboard.png

clipboard.png

The

360 compatibility mode uses the IE7 kernel, so flex sucks.

Menu