Здравствуйте, у меня eсть небольшой скрипт добавляющий блоки с текстом класса block и контейнер container однако когда блоков становится много появляется скрол бар и уменьшает ширину блоков - как можно избежать такого сдвига ширины
<!DOCTYPE html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.1.4/vue.global.prod.min.js"></script>
</head>
<body>
<div id="app" class="container">
<div v-for="i in messages" :key="i" class="block">
{{ i }}
</div>
</div>
</body>
<script>
Vue.createApp({
data: () => ({
messages: [],
}),
mounted() {
setInterval(
function () {
this.messages.push(Math.random().toString(32).slice(2));
}.bind(this)
, 100)
},
}).mount('#app');
</script>
<style>
.container {
background: yellow;
height: 50vh;
width: 5vw;
overflow-x: hidden;
overflow-y: auto;
display: flex;
flex-direction: column;
align-items: center;
}
.container::-webkit-scrollbar {
width: 5vmin;
height: 100%;
background-color: black;
}
.container::-webkit-scrollbar-thumb {
background: red;
}
.block {
background: green;
width: 5vw;
}
</style>
</html>
шрина блока умеьшается - например ето заметно по смещению отцентрованого текста когда появляется скролл.
Могу ли я сделать скролл как position: absolute...
