为什么位置固定减少了反应的宽度？

Question

当我使用position:fixed时为什么我的侧边栏宽度减小了？这是我的代码https://codesandbox.io/s/1yr3nlqp74

重现bug的步骤

1. 打开new window中的代码（全屏）
2. 在使用position :fixed之前和之后看pic

在使用位置 之前

在此行中使用位置css问题之后

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

Answer 1

“位置：固定”将取决于内容大小的宽度。为了更加清晰，尝试增加列表项中的文本，可以观察到侧边栏的宽度也增加了。

Answer 2

除非使用宽度，否则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%;
  }

对于更现代的浏览器，您可以使用position:sticky

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

这些选项都允许固定容器随屏幕弯曲。