<head>
<style>
body{
background-color:#011627;
}
.containing{
background-color: rgb(231, 231, 231);
width: 20%;
position: fixed;
height: 60%;
overflow: auto;
}
.o{
background-color:rgb(51, 21, 21);
height: 90px;
width: 100%;
margin-top: 1px;
border-radius: 20px;
}
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-track {
display: none;
}
::-webkit-scrollbar-thumb {
background: black;
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: grey;
}
.containing::-webkit-scrollbar {
display:none;
}
.containing:hover::-webkit-scrollbar {
display: block;
}
</style>
</head>
<body>
Я хочу сделать так, чтобы div не уменьшался, отображается полоса прокрутки, но также, чтобы значения o имели ту же ширину, что и содержимое, несмотря на наличие полосы прокрутки. Поэтому я думаю, что полоса прокрутки должна быть расположена выше o делителей, но я не могу понять, как это сделать.
<div class="containing">
<div class="o"> i dont want the div to shrink and i only want to use percentages</div>
<div class="o"></div>
<div class="o"></div>
<div class="o"></div>
<div class="o"></div>
<div class="o"></div>
<div class="o"></div>
<div class="o"></div>
<div class="o"></div>
</div>
</body>