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

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

“位置：固定”将采用宽度，具体取决于内容大小。为了进一步澄清，请尝试增加列表项中的文本，您可以观察到侧边栏的宽度也有所增加。

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;
  }

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