overflow hiddenが画像に対して効かない

ヘディングのテキスト

PC画面幅を狭めて行く際、横並びにした画像とテキストを同じ高さを保ったまま左配置の画像だけを徐々に非表示にしたいのですが、画像に対するoverflow: hidden;が効きません。。

実現したいこと

横並びにした画像とテキストを同じ高さを保ったまま、左配置の画像だけを徐々に非表示にしたいです。

該当のソースコード

html

                <div class="section message">
                    <div class="message-image">
                        <img src="./image/pc/message-img.jpg" alt="##" class="mv-pc">
                    </div>
                    <div class="message-inner-box">
                        <div class="message-inner">
                            <div class="s-title-box">
                                <h2 class="s-title m-title">Message</h2>
                                <span class="s-sub-title">ご挨拶</span>
                            </div>
                            <h3 class="m-catch">会社ひとりひとりの成長が、社会を変える</h3>
                            <p class="message-txt">新型ウイルスの影響で先行き不透明な昨今、
                                社会や人々の生活が大きな変化の中にある事を感じます。<br>
                               そして社会に多様性が求められる現代、企業活動においても働き方やビ 
                               ジネスの有り方に柔軟性や可変性が求められます。<br>
                                株式会社△△△はこの舵取り困難な情勢をチャンスと捉え、攻守一体 
                               の組織力で社会に貢献していきます。
                            </p>
                        </div>
                    </div>
                </div>

css

.message {
    padding: 4rem 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-sizing: border-box;
    overflow: hidden;

.message-image {
    width: 50%;
    box-sizing: border-box;
    margin: 0;
    overflow: hidden;
    height: 500px;
    position: relative;
}

.mv-pc {
    display: block;
    width: auto;
    height: 100%;
}

.message-inner-box {
    width: 50%;
    position: initial;
    transform: none;
    box-sizing: border-box;
    margin: 0 4rem;
}

.message-inner {
    position: initial;
    transform: none;
    padding-top: 2rem;
}

.m-catch {
    display: block;
    text-align: center;
    font-weight: 300;
    font-size: 1.8rem;
    margin-bottom: 3rem;
}

.message-txt {
    font-size: 1.4rem;
    width: 100%;
}

試したこと

【overflow hiddenが効かない原因】の記事を見つけ「position: relative;」を
セットで使用しないと効かないと言う記事があったため、追記しましたが
非表示に出来ませんでした。

行動規範の内容に同意します

回答1件

CSS
1.message {
2    padding: 4rem 0;
3    display: flex;
4    justify-content: space-around;
5    align-items: center;
6    box-sizing: border-box;
7    overflow: hidden;
8} /* << */
9
10.message-image {
11    width: 50%;
12    box-sizing: border-box;
13    margin: 0;
14    overflow: hidden;
15    height: 500px;
16    position: relative;
17}