Почему `scrollbar-gutter` применяется только к вертикальным (оси Y) прокрутки? ⇐ CSS

[Anonymous]

Цель состоит в том, чтобы избежать прокрутки, чтобы сдвинуть макет. Я пытаюсь зарезервировать пространство для горизонтальных полос прокрутки. < /P>
Почему Scrollbar-gutter < /code> применяется только к вертикальной (оси y-оси), и почему нет свойств Scrollbar-hight < /code>? class = "Snippet-Code-Html Lang-Html PrettyPrint-Override">

Код: Выделить всё

Left - Without






With Gutter
Item 2
Item 3
Item 4
Item 5
Item 6




The left box should be have the same height as the right box.


.wrapper {
display: flex;
gap: 50px; /* Space between the two examples */
}

.container {
width: 200px;
max-height: 300px;
overflow-x: overlay;  /* Horizontal scrollbar, only when necessary */
overflow-y: hidden;   /* Disable vertical scrollbar */
scrollbar-gutter: stable;  /* Trying to reserve space for the vertical scrollbar */
}

.content {
display: flex;
}

.item {
min-width: 100px;
padding: 20px;
background-color: lightgrey;
margin-right: 10px;
}
< /code>
< /div>
< /div>
< /p>
Почему это похоже на то, что автор спецификации CSS полностью игнорировал существование горизонтальных полос прокрутки? Есть ли обходной путь?

Hover me
Hover me
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8



This text should NOT be shifted down by the horizontal scrollbar when it appears


.container {
width: 100%;
max-height: 300px;
overflow-x: hidden; /* Initially hide the horizontal scrollbar */
overflow-y: hidden; /* Disable vertical scrollbar */
scrollbar-gutter: stable; /* Reserve space for vertical scrollbar */
transition: overflow-x 0.3s ease-in-out; /* Smooth transition for overflow change */
}

.container:hover {
overflow-x: auto; /* Show the horizontal scrollbar on hover */
}

.content {
display: flex;
}

.item {
min-width: 150px;
padding: 20px;
background-color: lightgrey;
margin-right: 10px;
}

Подробнее здесь: https://stackoverflow.com/questions/796 ... scrollbars