如何不使用overflow: hidden将图片网格限制在视口高度内？

我尝试将图片网格限制在视口高度内，给其容器设置overflow: hidden可以实现，但我需要为图片添加能溢出容器的标签元素，且标签需完全可见。同时要保证视口调整时图片始终保持分组紧贴的状态，且图片需完整显示。

目前第一个容器中的标签大部分被隐藏，希望标签能完全可见并溢出容器。

核心是让标签脱离设置了溢出隐藏的容器范围，同时保留原有图片网格的布局逻辑：

• 移除.wrapper的overflow: hidden属性，避免标签被容器裁剪
• 调整.label-example的定位逻辑，让它相对于整个网格项定位，确保标签可以溢出到容器外部
• 保留图片的object-fit: contain属性，保证图片始终完整显示，视口调整时自动适配大小
• 给网格添加gap: 0确保图片紧贴分组

CSS #

#_parent {
    display: flex;
    position: relative;
    height: 100vh;
    width: 50vw;
}

#_grid {
    display: flex;
    height: 100%;
    width: 100%;
    place-items: center;
    justify-content: center;
    margin: auto;
    border: 0;
    padding: 0;
}

#_row {
    display: grid;
    max-width: 100%;
    height: 100%;
    align-content: center;
    margin: 0;
    border: 0;
    padding: 0;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}

._img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    margin: 0;
    border: 0;
    padding: 0;
}

.wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin: 0;
    border: 0;
    padding: 0;
    position: relative;
    clear: both;
}

.label-example {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    left: 0;
    top: 0;
    height: auto;
    width: 100%;
    color: magenta;
    z-index: 10;
}

body {
    margin: 0;
    padding: 0;
    border: 0;
}

HTML #

<div id="_parent">
    <div id="_grid">
        <div id="_row">
            <div class="wrapper">
                <div class="label-example">1234567890</div>
                <img src="//placeimg.com/295/420?text=1" class="_img">
            </div>
            <div class="wrapper">
                <img src="//placeimg.com/295/420?text=2" class="_img">
            </div>
            <div class="wrapper">
                <img src="//placeimg.com/295/420?text=3" class="_img">
            </div>
            <div class="wrapper">
                <img src="//placeimg.com/295/420?text=4" class="_img">
            </div>
            <div class="wrapper">
                <img src="//placeimg.com/295/420?text=5" class="_img">
            </div>
            <div class="wrapper">
                <img src="//placeimg.com/295/420?text=6" class="_img">
            </div>
            <div class="wrapper">
                <img src="//placeimg.com/295/420?text=7" class="_img">
            </div>
            <div class="wrapper">
                <img src="//placeimg.com/295/420?text=8" class="_img">
            </div>
            <div class="wrapper">
                <img src="//placeimg.com/295/420?text=9" class="_img">
            </div>
            <div class="wrapper">
                <img src="//placeimg.com/295/420?text=10" class="_img">
            </div>
            <div class="wrapper">
                <img src="//placeimg.com/295/420?text=11" class="_img">
            </div>
            <div class="wrapper">
                <img src="//placeimg.com/295/420?text=12" class="_img">
            </div>
            <div class="wrapper">
                <img src="//placeimg.com/295/420?text=13" class="_img">
            </div>
            <div class="wrapper">
                <img src="//placeimg.com/295/420?text=14" class="_img">
            </div>
            <div class="wrapper">
                <img src="//placeimg.com/295/420?text=15" class="_img">
            </div>
        </div>
    </div>
</div>

内容的提问来源于stack exchange，提问作者HomuQB