Почему фиксированное положение уменьшило ширину в реакции?

Question

Почему ширина моей боковой панели уменьшается при использовании position:fixed? Вот мой код https://codesandbox.io/s/1yr3nlqp74

шагов по воспроизведению ошибки

1. открыть код в new window (полный экран)
2. см. Фото до и после использования position :fixed

перед использованием позиции

после использования положения проблема css в этой строке

 sideBar__block: {
    padding: 20,
    position: "fixed",
    top: "64px"
  },

Answer 1

Position:fixed; сделает div размером самого большого фрагмента контента, если не применяется ширина.

Есть несколько вариантов, которые вы можете попробовать.

С width

 sideBar__block: {
    padding: 20;
    position: fixed;
    top: 64px;
    width:21%;
  }

Чтобы сделать это изгиб со страницей, вы можете применить left и right позиционирование

 sideBar__block: {
    padding: 20;
    position: fixed;
    top: 64px;
    left:0%;
    right:74%;
  }

Для более современных браузеров вы можете использовать позиция: липкая

 sideBar__block: {
    padding: 20;
    position: sticky;
    top: 64px;
  }

Все эти опции позволят фиксированному контейнеру сгибаться вместе с экраном.

Answer 2

«Position: fixed» будет принимать ширину в зависимости от размера контента. Для большей ясности попробуйте увеличить текст в элементах списка, вы также можете наблюдать, как увеличивается ширина боковой панели.