reactjs - 为什么位置固定减少了 react 的宽度？

Question

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

重现错误的步骤

1. 在新窗口中打开代码(全屏)
2. 查看使用position :fixed前后的图片

使用位置之前

使用位置后此行中的 css 问题

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

Answer 1

Position:fixed; 将使 div 成为最大内容 block 的大小，除非应用了宽度。

您可以尝试几个选项。

具有宽度

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

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