Looking to showcase the seating arrangement in a cinema hall. If the seats occupy more than 50% of the page, I want a scroll bar to appear. Attempted using "overflow-scroll" without success. View result image
<div class="w-50">
<div class="border overflow-scroll">
<div v-for="row in seats" class="d-flex">
<div v-for="seat in row" :key="seat.id" class="seat"></div>
</div>
</div>
</div>
.seat {
width: 50px;
height: 50px;
background: dodgerblue;
border: solid black;
}
Encountering the same issue when using plain HTML and CSS (without Vue).
index.html
.seat {
width: 50px;
height: 50px;
background: dodgerblue;
border: solid black;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div style="width: 50%;">
<div style="border: solid black; overflow: scroll;">
<div style="display: flex;">
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
</div>
<div style="display: flex;">
<div class="seat"></div>
<div class="seat"></div>
<div class="seat"></div>
</div>
</div>
</div>
</body>
</html>