设置padding、flex、position属性的div内Button不可见问题

问题成因 #

这是fixed定位元素的默认特性和盒模型规则共同导致的，和React本身没有关系：

• 设为position: fixed的元素脱离普通文档流，默认宽度完全由内部内容撑开，不会自动铺满视口宽度
• 浏览器默认盒模型是content-box，这种模式下你给元素加的padding不会算在元素本身的宽度里，会往外“撑”。你给header加了左右padding、又设了justify-content: space-between，右侧的按钮直接被padding挤到了视口外面，看起来就像没渲染一样
• 把padding删掉之后，header的总宽度刚好是内部标题加按钮的宽度，整个容器都在视口可见范围内，按钮自然就显示出来了，但这时候没有两侧边距，达不到内容往中间靠的效果。

对齐课程逻辑的修复方法 #

完全不需要改你写的DOM结构，只要给header补两个缺失的样式属性就行，和课程的写法100%匹配：

header {
  position: fixed;
  top: 0;
  left: 0;
  /* 让固定定位的header宽度铺满整个视口 */
  width: 100%;
  /* 把padding算进header的总宽度里，不会把内容往外挤 */
  box-sizing: border-box;
  /* 原有flex相关属性保持不变 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 原本设置后会导致按钮消失的padding，现在可以正常生效，数值和课程保持一致即可 */
  padding: 0 5%;
}

改完后效果完全符合预期：头部固定在页面顶部，标题居左、按钮居右，两侧内边距正常生效，内容不会贴在浏览器边缘，和课程演示的效果完全一致。

内容的提问来源于stack exchange，提问作者Maxrain