Why the <label> size is different on Firefox? - firefox

Question

In all other browsers, these cards (.resort__cards) are correctly spaced. Because the <label> is the same size as the <img> (even though the <img> tag is the child element and the <label> is the parent element.)
But in Firefox the <label> does not obey this size, so the cards overlap.
This happens because the <label> tag is the size of the ORIGINAL <img> (188 x 319px), that is, the <label> tag does not have the size of the <img> tag that I modified (which would be height: 100%).
Does anyone know why this happens?
>Print Chrome<
>Print Firefox<
PS: Sorry for my bad english!
.resorts__cards {
display: flex;
width: 100vw;
height: 55vh;
margin: 50px 0 50px auto;
z-index: 0;
overflow-y: hidden;
overflow-x: scroll;
box-sizing: content-box;
scrollbar-width: none;
-ms-overflow-style: none;
scroll-snap-type: x mandatory;
}
.resorts__cards img {
width: auto;
height: 100%;
margin: 0 20px;
border-radius: 20px;
scroll-snap-align: center;
}
.resorts__1 {
position: relative;
overflow-y: hidden;
height: 100vh;
}
.resorts__2 {
overflow-y: hidden;
position: relative;
height: 100vh;
}
.resorts__3 {
position: relative;
overflow-y: hidden;
height: 100vh;
}
<div class="resorts__cards">
<label for="resorts1">
<img src="https://chi01pap002files.storage.live.com/y4m_b-iLV2IGtXJsxH846loaz8VdbEzeC5JRXnhkr3DESFs2lbjsh9SE5N890gLy7ts1tagl0szlHhkTPzSC4kljYlz5MsnZyKvX8_NksSEP_bhdqqtW_j_yp6Z4-4KkJ41f6Hm0R6HcdWdOgis4172b3RsscYULK7t-zF64yd70gZoU6fBhieAJqxY82FOfz21?width=188&height=319&cropmode=none" alt="video lux"/>
</label>
<label for="resorts2">
<img src="https://chi01pap002files.storage.live.com/y4mFUVIFs2d7rBVSQng4PvGOuEAjfc9ddKfnEkN-Jt6imdinCeRhmFpgkGZwpDnpDhMW_RsfoZXNhJrxFPe5sk3Y-JB50HxXIYT-i6JT4HddJ8LoNhbNEcobtoBbyZOzhT7lLjrhovkCKnVGAWmI9VjrzGQw9RqcGY1xUTF-9fVU2-rYD3WZCCJ-aBECzLZFOsY?width=188&height=319&cropmode=none" alt="Six Senses"/>
</label>
<label for="resorts3">
<img src="https://chi01pap002files.storage.live.com/y4m4nMmzNd1FnSHpMzcIh_ysk5xUOtQvQ0W9acJ-pmrEfmnPSS8rgz71W252EJffuDnWoo46-BVz-RYovckctPV1Evh7SUz3Wu-vP5c62yxEN7Q0FtyiC2odZbVSJojUmTK_AMEEBCIdQWO0-6LJZwfNWzep8Hgu_dSYBF9wa2KezWz4UpMwJ0K7tBUbVW2t0KW?width=188&height=319&cropmode=none" alt="Ayada"/>
</label>
</div>