Почему overflow не прокручивает контент целиком вверх?

Question

[Артем Прохоров]

Мой код.
Сайдбар просто не прокручивается в верх целиком, как это решить? Может быть поменять метод дизейбла overflow у body, но тогда как это сделать? Или по другому делать прокрутку для отдельного элемента, но как тогда?

Answer 1

[Aetae]

Добавь ребёнку margin auto.

Comments

[Артем Прохоров]

Как оказалось, проблема была в flex-diraction, именно удаление его помогло мне. Только вот я до сих пор не понимаю почему он все ломает.

[Aetae]

Артем Прохоров, проблема у тебя в justify-cotent: center. При другом flex-direction ты на точно такую же проблему натолкнёшься поставив align-items: center.
По умолчанию центрирование в flex работает точно: контент будет по центру, даже если "края" обрежет. margin auto на содержимом решает проблему.

[Артем Прохоров]

Aetae, Не помогло почему то, но очень хочу разобраться.
Новый пример без li'ок (как раз реальный пример). Пожалуйста, можете вы это указать, может я что то не так делаю? Пробовал в auto ставить и sidebar'у самому и его дочерним дивам.

[Артем Прохоров]

Aetae, Но а то что проблема в justify-cotent: center я понял, за это спасибо, я вообще не верный вывод сделал.

Answer 2

[Артем Прохоров]

В общем

#sidebar::before, #sidebar::after {
  content: '';
  margin: auto;
}

Иначе margin auto просто отцентрует блок по центру экрана. А так, сайдбар останется в той области экрана где вы его расположили и в то же время отцентрует контент внутри него бещз поломки скролла.