HTMLでvideoタグが親要素からはみ出す

Question

前提・実現したいこと

HTML、CSSを利用し、動画を再生するページを作成しているのですがウィンドウサイズを変更した際に高さ、幅をはみ出さないように余白を表示したいです。
動画サイズが親要素高さいっぱいの際ウィンドウ横幅変更　→　動画横に余白
動画サイズが親要素横幅いっぱいの際ウィンドウ高さ変更　→　動画下に余白

発生している問題

横幅変更時に、max-heightを指定していても動画の高さが親要素をはみ出します
下記ソースコードによりウィンドウの高さ変更時に横幅は親要素をはみ出さず、余白が表示されます

該当のソースコード

<div id="wrapper">
    <header>
        <nav>
        </nav>
    </header>
    <div id="contents">
        <div class="flex-wrap">
            <div class="video-content">
                <div class="video-wrap">
                    <div id="video-box">
                        <video class="video">
                            <source src="https://www9.nhk.or.jp/das/movie/D0002190/D0002190002_00000_V_000.mp4">
                        </video>
                    </div>
                </div>
                <div class="video-footer">
                </div>
            </div>
            <div class="form">
            </div>
        </div>
    </div>
    <footer>
    </footer>
</div>

body, html {
    height: 100%;
}

#wrapper {
    width: 100%;
    height: 100%;
    margin: 0px auto;
}

header, footer {
    height: 6%;
    color: white;
    position: relative;
}

header {
    background-color: #F00;
}

footer {
    background-color: #0F0;
}

#contents {
    height: 88%;
    background-color: #000;
}

.flex-wrap {
    display: flex;
    height: 100%;
    position: relative;
}

.video-content {
    width: calc(100% - 350px);
    height: 100%;
    position: relative;
}

.video-wrap {
    position: relative;
    width: 100%;
    height: calc(100% - 70px);
}

#video-box {
    position: relative;
    max-height: 100%;
    max-width: 100%;
}

#video-box > .video {
    position: relative;
    height: 100%;
    width: 100%;
}

.video-footer {
    position: relative;
    bottom: 0;
    width: 100%;
    display: flex;
    height: 70px;
    background-color: #00F;
}

.form {
    width: 350px;
    overflow: scroll;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: white;
    border: 1px solid;
}

試したこと

・videoのheightを100vhに変更
・video-boxのheightを100vhに変更
・両方のheightを100vhに変更

Comments

[Lhankor_Mhy]

ご提示のコードを試してみましたが、問題が再現しませんでした。
https://jsfiddle.net/Lhankor_Mhy/zrpx0gj6/

[te_ff]

ご回答ありがとうございます。
別の要素に原因がありそうなため一度コード見直してみます。

[te_ff]

確認してみましたが、原因特定することができませんでした。
依頼内容のコードに不備があったため修正いたしましたので再度教えていただけますと幸いです

Answer 1

こうしてみてはいかがですか？

#video-box {
	position: relative;
	max-height: 100%;
	max-width: 100%;
	height: 100%; /* 追加 */
}

Comments

[te_ff]

ありがとうございます！
解決できました！！！