為什麼具有固定寬度和最大寬度為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影片教學

問題：

我想要的效果：

我嘗試過的方法：

我的想法：