为什么具有固定宽度和最大宽度为90%的网格子项会溢出网格轨道？

Question

问题：我的问题非常简单，我想知道为什么.header元素在达到1500像素的视口宽度时会溢出其网格轨道。代码：*{box-sizing:border-box;padding:0;margin:0;}body{background:#6e28d9;color:white;}.container{display:grid;grid-template-areas:'header';grid-templa

P粉238433862 · Answer

使用90vw而不是90%似乎对此起作用

*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  background: #6e28d9;
  color: white;
}

.container{
  display: grid;
  grid-template-areas: 'header';
  grid-template-columns: 1fr;
  background-color: rgba(255, 255, 255, 0.2);
}

.header{
  display: flex;
  justify-content: space-between;
  grid-area: header;
  width: 1500px;
  max-width: 90vw;
  margin: 0 auto;

  border: 1px solid red; /*Added just to visualize the exact width*/
}


  
    header start
    header end

php8，我来也

30分钟学会网站布局

尚观Oracle入门到精通视频教程

你的第一行 UNI-APP 代码

Flutter 从头到应用启动

兄弟连Linux新版视频教程

AXURE 9视频教程（适合产品经理交互产品设计UI）

零基础PS视频教程

16天带你入门UI视频教程

PS技巧和切片技巧视频教程

阿里云环境搭建以及项目上线视频教程

计算机网络概述——程序员必须掌握的基础知识

程序员必备教程——HTTP协议讲解

Websocket视频教程

问题：

我想要的效果：

我尝试过的方法：

我的想法：