Разница в переполнении между браузерами Chrome и Firefox ⇐ CSS

[Anonymous]

У меня есть проект, над которым я работаю в рамках плана веб-разработки, и я разработал боковую панель с внутренним прокручиваемым списком. В Chrome внутренний список прокручивается, но в Firefox каждый из его дочерних элементов прокручивается независимо. Код без дополнительных битов выглядит следующим образом:
См. Codepen: https://codepen.io/rins6618/pen/yLmJxRy (похоже, я не могу получить фрагменты кода).

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

B
Blank Project





[list]
[*]
 Projects

[*]

Create new project...


[*]

Delete a project...


[/list]
[list]
[*]
This project

[*]

Rename this project...


[*]

View notes...


[*]

View due dates...


[*]

Change project color...


[/list]


[list]
[*]

About


[*]

Settings


[/list]

CSS:

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

* {
box-sizing: border-box;
margin: 0;
}

:root {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.flex {
display: flex;
}

.grid {
display: grid;
}

html, body {
height: 100%;
width: 100%;
background-color: #efefef;
}

main {
margin-left: 30rem;
}

li {
list-style: none;
}

#sidebar {
flex-direction: column;
margin: 0.5rem 0.5rem 0 0;
width: 30rem;
height: 100dvh;
padding: 1rem;

position: fixed;
z-index: 2;
top: 0;
left: 0;
background-color: #fff;

overflow-x: hidden;
overflow-y: hidden;

border-radius: 0rem 1rem 0rem 0rem;
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

#scrollable-sidebar {
flex: 1;
border-top: 0.25rem solid #eee;
border-bottom: 0.25rem solid #eee;
flex-direction: column;
overflow-y: scroll;
scrollbar-width: none;
-ms-overflow-style: none;
}

#scrollable-sidebar > * {
padding: 0 1rem;
overflow-x: hidden;
overflow-y: visible;
}

#scrollable-sidebar >  *:first-child {
border-top: none;
}

#scrollable-sidebar::-webkit-scrollbar {
display: none;
}

#sidebar header {
transition: background-color .3s;
height: 5rem;
position: relative;
overflow: visible;
}

#sidebar:first-child {
border-top-right-radius: 1rem;
}

#project-selector {
z-index: 3;
background: none;
border: none;
font-size: inherit;
transition: background-color .1s;
transition: box-shadow .05s;
position: relative;
padding: 1rem;
cursor: pointer;
align-items: center;
gap: 1ch;
width: 75%;
border-radius: 0.5rem;
box-shadow: none;
}

#project-selector > * {
pointer-events: none;
}

#project-selector:hover {
background-color: #eee;
}

#project-icon {
margin-right: 1ch;
flex-shrink: 0;
background: rgb(163,163,163);
background: linear-gradient(135deg, rgba(163,163,163,1) 0%, rgba(58,58,58,1) 100%);
border-radius: 5%;
aspect-ratio: 1 / 1;
width: 2rem;
align-items: center;
justify-content: center;
font-weight: 800;
color: #fff;
}

#project-name {
font-size: 1.25rem;
max-width: 18ch;
text-overflow: ellipsis;
overflow-x: hidden;
white-space: nowrap;
}

#scrollable-sidebar ul {
min-height: fit-content;
flex-direction: column;
margin: 0 1rem;
border-top: 1px solid #eee;
padding: 1rem;
gap: 1rem;
}

#sidebar li > h3 {
padding: 0.5rem 0 1rem 0;
user-select: none;
}

#sidebar li > button {
cursor: pointer;
width: 100%;
transition: color .3s;
transition: background-color .3s;
color: #444;
border: none;
background-color: transparent;
align-items: center;
padding: 0.75rem;
border-radius: 1rem;
font-size: 1.25rem;
gap: 2ch;
}

#sidebar li > button:hover {
background-color: #eee;
color: #000;
}

#sidebar li > button > span {
text-overflow: ellipsis;
white-space: nowrap;
}

#sidebar > footer > ul {
margin: 0 1rem;
min-height: fit-content;
flex-direction: column;
padding: 1rem;
}

Я знаю, что могу решить эту проблему, используя один элемент . Дело не в этом. Я хочу знать, почему тот факт, что Chrome и Firefox отличаются по такому основному правилу. Что, если мне придется запретить прокрутку двух элементов, и у меня не будет другого выбора? Имейте в виду, что правила CSS гарантируют, что не должен быть прокручиваемым, однако Firefox по-прежнему делает их прокручиваемыми. (соответствующее правило CSS приведено ниже);

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

#scrollable-sidebar > * {
padding: 0 1rem;
overflow-x: hidden;
overflow-y: visible;
}

Различия:
Chrome
[img]https: //i.sstatic.net/LhvunVYd.png[/img]

Firefox


Был вопрос, связанный с боковыми панелями в StackOverflow, но он не имеет отношения к тому, с чем у меня возникли проблемы.

Подробнее здесь: https://stackoverflow.com/questions/790 ... x-browsers