flex-container超出视口致移动端横滚？grid布局问题解析与解决

复现代码 #

HTML代码

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Learn</title>
  </head>
  <body>
    
    <div class="grid-container">
      <aside class="sidebar">sidebar</aside>
      <main class="main">
        <div class="flex-container">
          <div class="box box1">1</div>
          <div class="box box2">2</div>
          <div class="box box3">3</div>
          <div class="box box4">4</div>
          <div class="box box2">5</div>
        </div>
      </main>
    </div>
    

  </body>
</html>

CSS代码

:root {
  font-size: 1em;
  line-height: 1.15;
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
}

.grid-container {
  display: grid;
  justify-content: center;
  grid-template-columns: 1fr;
  grid-template-areas:
    "sidebar"
    "main";
  
}

.sidebar {
  background: pink;
  grid-area: sidebar;
}

.main {
  background: orange;
  grid-area: main;
  
}

.main ul {
  display: flex;
  list-style: none;
}

.flex-container { {
  display: flex;
  
}

.box {
  width: 200px;
  height: 200px;
}

.box1 {
  background: blue;
}

.box2 {
  background: green;
}

.box3 {
  background: orchid;
}

.box4 {
  background: red;
}


@media (min-width: 52em) {
  .grid-container {
    grid-template-columns: 200px 500px;
    grid-template-areas:
      "sidebar main";
  }
}

问题描述 #

移动端竖屏视图下，.flex-container内的5个固定宽度元素会超出水平视口。排查发现是外层.grid-container的grid-template-columns: 1fr导致的——移除Grid容器后，Flex元素就能正常适配可用视口宽度。我不想用flex-wrap让元素换行，希望找到其他解决方案。

解决方案（已验证有效） #

将.grid-container的grid-template-columns从1fr修改为minmax(0, 1fr)：

.grid-container {
  display: grid;
  justify-content: center;
  grid-template-columns: minmax(0, 1fr); /* 修改此处 */
  grid-template-areas:
    "sidebar"
    "main";
}

原因分析 #

Grid布局中，1fr的计算逻辑是优先满足子元素的内在宽度需求，当子元素（这里是.main里的Flex容器）内容超出视口时，1fr会被撑开，导致整个Grid列宽超过视口范围。而minmax(0, 1fr)强制列的最小宽度为0，约束Grid列宽不能超过可用空间，此时子元素超出部分会触发横向滚动，不会撑爆容器。

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