<!DOCTYPE html>
<html lang="ja">
<head>
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8"/>
<!-- FontAweSome -->
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<!-- JQuery -->
<script
src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous">
</script>
<!-- bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</head>
<body>
<!-- -->
<div class="container all-container">
<div class="sub-container">
<div class="area area1"></div>
<div class="area area2"></div>
<div class="area area3"></div>
<div class="area area4"></div>
<div class="area area5"></div>
</div>
</div>
</body>
<style>
.all-container {
height: 100vh;
}
.sub-container {
height: 100%;
background-color: #696969;
overflow-y: scroll;
-ms-overflow-style: none;/* IE, Edge 対応 */
scrollbar-width: none;/* Firefox 対応 */
}
.sub-container::-webkit-scrollbar {
display:none;/* Chrome, Safari 対応 */
}
.area {
height: 20%;
border: solid 1px rgb(37, 37, 37);
resize: vertical;
overflow: hidden;
background-color: #696969;
}
.area1 {
min-height: 200px;
}
.area2 {
min-height: 100px;
}
.area3 {
min-height: 50px;
}
.area4 {
min-height: 150px;
}
.area5 {
min-height: 250px;
}
</style>
</html>
