ｃｓｓでbodyタグの中にdiv.wrapperで囲っていてmin-heght:100vh;を指定しているのに、なかの要素がwapperをはみ出る原因を教えてください。

実現したいこと

wapperの中に要素を収めたい。

前提

おそらく、ｃｓｓの高さ指定の概念の理解が間違っていると思います。
要素がwrapperの下にはみ出てしまいます。
原因を教えてください。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Document</title>
8    <link rel="stylesheet" href="style.css">
9</head>
10<body>
11    <div class="wrapper">
12        <header class="key-visual">
13            <h1 class="main-title"><img class="main-image"src="image\logo (3).svg"></h1>
14                <nav>
15                    <ul>
16                        <li><a href="#MENU">MENU</a></li>
17                        <li><a href="#ABOUT">ABOUT</a></li>
18                        <li><a href="#LOCATION">LOCATION</a></li>
19                    </ul>
20                </nav>
21        </header>
22        <section id="MENU" class="sec1">
23            <div id="title" class="sec1-title"><h1>MENU</h1></div>
24            <div class="MENU">
25                    <div class="MENU-container">
26                        <div class="COFFEE">
27                            <h2>COFFEE</h2>
28                            <dl>
29                                <dt>XXXXXXXX</dt>
30                                <dd>¥500</dd>
31                                <dt>XXXXXXXX</dt>
32                                <dd>¥500</dd>
33                                <dt>XXXXXXXX</dt>
34                                <dd>¥500</dd>
35                                <dt>XXXXXXXX</dt>
36                                <dd>¥500</dd>
37                                <dt>XXXXXXXX</dt>
38                                <dd>¥500</dd>
39                                <dt>XXXXXXXX</dt>
40                                <dd>¥500</dd>
41                                <dt>XXXXXXXX</dt>
42                                <dd>¥500</dd>
43                                <dt>XXXXXXXX</dt>
44                                <dd>¥500</dd>
45                                <dt>XXXXXXXX</dt>
46                                <dd>¥500</dd>
47                                <dt>XXXXXXXX</dt>
48                                <dd>¥500</dd>
49                            </dl>
50                        </div>
51                        <div class="right">
52                            <div class="FOOD">
53                                <h2>FOOD</h2>
54                                <dl>
55                                    <dt>XXXXXXXX</dt>
56                                    <dd>¥500</dd>
57                                    <dt>XXXXXXXX</dt>
58                                    <dd>¥500</dd>
59                                    <dt>XXXXXXXX</dt>
60                                    <dd>¥500</dd>
61                                </dl>
62                            </div>
63                            <div class="OTHER">
64                                <h2>OTHER</h2>
65                                <dl>
66                                    <dt>XXXXXXXX</dt>
67                                    <dd>¥500</dd>
68                                    <dt>XXXXXXXX</dt>
69                                    <dd>¥500</dd>
70                                    <dt>XXXXXXXX</dt>
71                                    <dd>¥500</dd>
72                                </dl>
73                            </div>
74                        </div>
75                    </div>
76            </div>
77        </section>
78        <section id="ABOUT" class="sec2">
79            <div id="title" class="sec2-title"><h1>ABOUT</h1></div>
80                <h2 class="sec2-main">COFFEE</h2>
81            <div class="sec2-container">
82                <ul>
83                    <li class="item">
84                        テキストテキストテキストテキストテキストテキストテキストテキスト
85                        テキストテキストテキストテキストテキストテキストテキストテキスト
86                        テキストテキストテキストテキストテキストテキストテキストテキスト
87                        テキストテキストテキストテキストテキストテキストテキストテキスト
88                    </li>
89                    <li class="item">
90                        テキストテキストテキストテキストテキストテキストテキストテキスト
91                        テキストテキストテキストテキストテキストテキストテキストテキスト
92                        テキストテキストテキストテキストテキストテキストテキストテキスト
93                        テキストテキストテキストテキストテキストテキストテキストテキスト
94                    </li
95                    >
96                    <li class="item">
97                        テキストテキストテキストテキストテキストテキストテキストテキスト
98                        テキストテキストテキストテキストテキストテキストテキストテキスト
99                        テキストテキストテキストテキストテキストテキストテキストテキスト
100                        テキストテキストテキストテキストテキストテキストテキストテキスト
101                    </li
102                    >
103                    <li class="item">
104                        テキストテキストテキストテキストテキストテキストテキストテキスト
105                        テキストテキストテキストテキストテキストテキストテキストテキスト
106                        テキストテキストテキストテキストテキストテキストテキストテキスト
107                        テキストテキストテキストテキストテキストテキストテキストテキスト
108                    </li
109                    >
110                </ul>
111            </div>
112                <div class="READ">
113                    <h3>Read More</h3>
114                </div>
115            
116        </section>
117        <section id="LOCATION" class="sec3">
118            <div id="title" class="sec3-title"><h1>LOCATION</h1></div>
119        </section>
120        <footer>
121            © COFFEE
122        </footer>
123    </div>
124    
125</body>
126</html>

CSS
1@charset "utf-8";
2
3* {
4    margin: 0;
5    padding: 0;
6    box-sizing: border-box;
7}
8
9.wrapper {
10    width: 100%;
11    min-height: 100vh;
12    display: flex;
13    flex-direction: column;
14    background-color: lightsalmon;
15}
16
17html {
18    scroll-behavior: smooth;
19}
20
21/* header */
22
23.key-visual {
24    width: 100%;
25    height: 700px;
26    background-image: url(image/mainvisual2.jpg);
27    background-repeat: no-repeat;
28    background-size: cover;
29    background-position: center;
30    position: relative;
31}
32.main-title {
33    position: absolute;
34    height: 100%;
35    width: 100%;
36    display: flex;
37    align-items: center;
38    justify-content: center;
39}
40.main-image {
41    width: 500px;
42    filter: drop-shadow(1px 1px 10px #c0c0c0);
43}
44
45header nav {
46    display: flex;
47    justify-content: right;
48    width: 100%;
49    height: 90px;
50    position: relative;
51}
52header nav ul {
53    position: absolute;
54    width: 250px;
55    height: 100%;
56    display: flex;
57    align-items: center;
58    justify-content: space-between;
59    margin-right:40px;
60}
61
62header nav ul li {
63    list-style: none;
64}
65header nav ul li a {
66    text-decoration: none;
67    color: white;
68    font-weight: bold;
69    filter: drop-shadow(1px 1px 2px #121212 );
70}
71
72header nav ul li a:hover {
73    color: red;
74    transition: .5s;
75}
76
77/* title-img */
78
79#title {
80    width: 100%;
81    height: 350px;
82    margin-top: 20px;
83    background-color: #fff;
84    border: 1px solid black;
85    position: relative;
86}
87
88.sec1-title {
89    position: absolute;
90    width: 100%;
91    height: 100%;
92    background-image: url(image/menu.jpg);
93    background-attachment: fixed;
94    background-size: cover;
95    background-position: center;
96}
97.sec2-title {
98    position: absolute;
99    width: 100%;
100    height: 100%;
101    background-image: url(image/about.jpg);
102    background-attachment: fixed;
103    background-size: cover;
104    background-position: center;
105}
106.sec3-title {
107    position: absolute;
108    width: 100%;
109    height: 100%;
110    background-image: url(image/location.jpg);
111    background-attachment: fixed;
112    background-size: cover;
113    background-position: center;
114}
115
116#title  h1 {
117    position: absolute;
118    top: 35%;
119    left: 35%;
120    color: #fff;
121    font-weight: 700;
122    font-size: 80px;
123}
124
125
126/* MENU */
127
128.MENU {
129    width: 100%;
130    height: 950px;
131    padding: 150px 300px;
132    display: flex;
133    justify-content: center;
134    position: relative;
135}
136
137.MENU .MENU-container {
138    position: absolute;
139    display: flex;
140    max-width: 1000px;
141    position: relative;
142}
143.COFFEE {
144    display: flex;
145    flex-direction: column;
146    height: 100%;
147    width: 50%;
148    justify-content: center;
149    position: relative;
150}
151h2 {
152    width: 200px;
153    display: flex;
154    justify-content: center;
155    border-bottom: 5px solid red;
156    margin-bottom: 60px;
157}
158
159
160.FOOD {
161    padding-top: 10px;
162    width: 100%;
163    height: 100%;
164    margin-bottom: 55px;
165}
166.OTHER {
167    width: 100%;
168    height: 100%;
169}
170.right {
171    display: flex;
172    width: 50%;
173    height: 100%;
174    flex-direction: column; 
175    justify-content: space-between;
176}
177
178dl {
179    width: 100%;
180    display: flex;
181    flex-wrap: wrap;
182}
183dl dt {
184    width: 80%;
185    border-bottom: dotted 1px black;
186    margin-bottom: 25px;
187}
188dl dt dd {
189    width: 20%;
190    margin-bottom: 25px;
191}
192.MENU h2 {
193    font-size: 50px;
194}
195
196/* ABOUT */
197
198.sec2 {
199    width: 100%;
200    height: 900px;
201    position: relative;
202}
203.sec2 .sec2-main {
204    position: absolute;
205    width: 150px;
206    left: 50%;
207    transform: translate(-50%);
208    margin: 100px 0;
209}
210.sec2-container {
211    position: absolute;
212    left: 50%;
213    transform: translate(-50%);
214    margin-top: 250px;
215    width: 90%;
216    height: 600px;
217    background-color: aqua;
218    position: relative;
219}
220.sec2-container ul {
221    position: absolute;
222    display: flex;
223    justify-content: center;
224    flex-wrap: wrap;
225}
226
227.sec2-container .item {
228    width: 520px;
229    height: 150px;
230    padding: 10px;
231    margin: 10px;
232    background-color: chartreuse;
233} 
234.sec2-container ul li {
235    list-style: none;
236}
237
238.READ {
239    width: 100%;
240    height: 100px;
241    position: relative;
242}
243
244.READ h3 {
245    width: 200px;
246    position: absolute;
247    display: flex;
248    align-items: center;
249    justify-content: center;
250    background-color:lightskyblue;
251}
252
253/* footer */
254
255footer {
256    width: 100%;
257    height: 20px;
258    display: flex;
259    justify-content: center;
260    align-items: center;
261    background-color: aqua;
262}

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

回答1件

min-heght は最小の高さを指定するものです。min-heght:100vh;は、この要素の中身の高さが100vhより小さくて気も、要素の高さは 100vh を保つということです。中身の高さが100vhを上回れば、それにこの要素の高さもそれに合わせて拡張します。

heght:100vh;と設定すれば高さは100vhで固定されます。

ただ、「wapperの中に要素を収めたい。」とのことですが、中の要素の高さが100vhを超えていますのでそのままでは収まりませんのではみ出します。
はみ出した部分を隠したいのなら下記のように設定すればいいですが、それだとはみ出した部分を見ることができなくなります。

css
1.wrapper {
2  width: 100%;
3  height: 100vh; /* heightに修正 */
4  overflow: hidden; /* 追加　はみ出した部分を隠す */
5  display: flex;
6  flex-direction: column;
7  background-color: lightsalmon;
8}