problem description

the BUG, that appears in multiple lines using inine-block layout does not know exactly why

each movie line is an item, and each "2D item 3D" tag is an item-tag-title, that displays normally when there is only one item, but multiple item, will affect the item-tag-title, in the next item and cause the word element to sink. If you delete all item, before the problematic item, the item-tag-title of this child element returns to normal.

the environmental background of the problems and what methods you have tried

I think this should be a layout error, it should be some attribute of the previous item that affects the next element, but each movie item is an independent block, how can its height and attribute affect a node in the next element?

tried to adjust the vertical,line-height, but did not solve it. Is
generated because the calculated attribute of the rem unit has a decimal?

related codes

/ / Please paste the code text below (do not replace the code with pictures)

< template >

<div class="movie-item">
    <!---->
    <div class="item-img">
        <img :src="item.imgUrl">
        <span class="item-play"></span>
    </div>
    <!---->
    <div class="item-info">
        <!---->
        <div class="item-top">
            <div class="item-title">{{ item.title }}</div>
            <div class="item-tag">
                <i class="item-tag-title">{{ item.tagTitle }}</i>
                <i class="item-tag-des">{{ item.tagDes }}</i>
            </div>
        </div>
        <!---->
        <div class="item-score">
            <template v-if="item.beon">
                {{ item.scoreMsg }} <i class="item-score-color">{{ item.score }}</i>
            </template>
            <template v-else>
                <i class="item-score-color">{{ item.interest }} </i> | 
                {{ item.ondata }}
            </template>
        </div>
        <!---->
        <div class="item-director">
            {{ item.director }}
        </div>
        <div class="item-actor">
            {{ item.actor }}
        </div>
        <div class="item-recom-tag">
            <span class="t-hot" v-if="item.recomTag == 1"></span>
            <span class="w-hot" v-if="item.recomTag == 2"></span>
            <span class="a-hot" v-if="item.recomTag == 3"></span>
        </div>
    </div>
    <!---->
    <div class="item-pay">
        <div class="btn-sale" v-if="item.beon"></div>
        <div class="btn-pre-sale" v-else></div>
        <a href="-sharp"></a>
    </div>
</div>

< / template >

css is as follows:

.movie-item

padding-top: .3rem
padding-bottom:.3rem
display:flex
font-size:13px
justify-content: space-around
border-bottom: 1px solid -sharpededed
box-sizing:border-box
.item-img
    max-width:1.32rem
    overflow:hidden
    border-radius:3px
    flex-group:1
    img
        max-width:100%
.item-info
    color:-sharp999
    margin-left:.12rem
    .item-top
        margin-bottom:.14rem
        .item-title
            color:-sharp000
            font-size:16px
            font-weight:500
            width:7em
            overflow:hidden
            text-overflow: ellipsis
            white-space: nowrap
            display:inline-block
        .item-tag
            font-size:0
            box-sizing:border-box
            letter-spacing: -1px;
            display:inline-block
            border:1px solid -sharp999
            height:.3rem
            line-height:.3rem
            border-radius:3px 0 0 3px
            i
                padding-left:.05rem
                padding-right:.05rem
                display:inline-block
                font-size:12px
                box-sizing:border-box
                text-align:center
                &.item-tag-title
                    color:-sharpfff
                    background:-sharp999
                    border-radius:3px 0 0 3px
                    margin-left:-1px
                &.item-tag-des
                    color:-sharp999        
    .item-score
        margin-bottom:.08rem
        .item-score-color
            color:-sharpfea54c
            font-size:14px
    .item-director
        margin-bottom:.08rem
    .item-actor
        margin-bottom:.08rem
    .item-recom-tag
        font-size:12px
        .t-hot
            border:1px solid -sharpfea54c
            padding:.05rem
            color:-sharpfea54c
        .w-hot
            border:1px solid -sharpff4d64
            padding:.05rem
            color:-sharpff4d64
        .a-hot
            border:1px solid -sharp349cec
            padding:.05rem
            color:-sharp349cec
.item-pay
    flex-group:1
    max-width:1.32rem
    margin-left:.15rem
    display:flex
    flex-direction:column
    text-align:center
    flex-wrap:wrap
    justify-content:center
    align-items:center
    div
        color: -sharpfff
        box-sizing: border-box
        height: .56rem
        line-height: .56rem
        padding: 0 .26rem
        font-size: 12px
        border-radius: 2.4rem
        display:block
        margin-bottom:.1rem
        text-align:center
    .btn-sale
        background-image: -webkit-linear-gradient(45deg,-sharpff7ba0,-sharpff4d64)
        background-image: linear-gradient(45deg,-sharpff7ba0,-sharpff4d64)
    .btn-pre-sale
        background-image: -webkit-linear-gradient(45deg,-sharp55c2ff,-sharp349cec)
        background-image: linear-gradient(45deg,-sharp55c2ff,-sharp349cec)
    a
        display:block
        font-size:12px
        text-align:center

what result do you expect? What is the error message actually seen?

I hope the old driver has been helping me solve my doubts all day without a clue.