Как расположить полосу прокрутки над элементом? - PullRequest
0 голосов
/ 04 апреля 2020

<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>

...