为什么在我的示例中flex-shrink表现为这种方式？

Question

为什么在我的示例中flex-shrink表现为这种方式？

您能给我解释一下这里的情况吗？（如果可能，请附上CSS规范的链接）

当我在＃grid-container（）上将flex-shrink设置为0时，出现了整个页面的滚动条flex: 1 0 auto

但是，当我在＃grid-container（）上将flex-shrink设置为1时，条形滚动条仅针对＃grid-container出现flex: 1 1 auto

在＃grid-container上的flex-shrink下面的代码段中，将其设置为0（）。将其更改为1（）以查看差异flex: 1 0 autoflex: 1 1 auto

html { height: 100%; } body { display: flex; flex-direction: column; height: 100%; margin: 0; } #header { background-color: brown; flex: 0 0 100px; } #grid-container { flex: 1 1 auto; display: grid; overflow: hidden; grid-template-rows: 1fr; grid-template-columns: 1fr; } #grid-item { grid-column: 1/2; grid-row: 1/2; overflow: auto; } #list { overflow: auto; } #list-item { font-size: 140px; }
Run Code Online (Sandbox Code Playgroud)
<html> <head> <meta charset="utf-8"> <title>Page Title</title> </head> <body> <div id="header"></div> <div id="grid-container"> <div id="grid-item"> <div id="list"> <div id="list-item">1</div> <div id="list-item">2</div> <div id="list-item">3</div> <div id="list-item">4</div> <div id="list-item">5</div> <div id="list-item">6</div> </div> </div> </div> </body> </html>
Run Code Online (Sandbox Code Playgroud)

Answer 1

Tem*_*fif 2

通过设置flex-shrink:1（默认值），您允许元素在其弹性容器内收缩，并且由于您将body（弹性容器）设置为，height:100%它将收缩以适合其内部，仅在容器上创建滚动条，因为其内容溢出。更准确地说，滚动条打开#grid-item，而不是容器打开，这是合乎逻辑的，因为这个容器具有overflow:auto。

添加边框以更好地看到这一点：

html {
  height: 100%;
  background:#fff;
}

body {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  background:red;
}

#header {
  background-color: brown;
  flex: 0 0 100px;
}

#grid-container {
  flex: 1 1 auto;
  display: grid;
  overflow: hidden;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr; 
  border:5px solid green;
}

#grid-item {
  grid-column: 1/2;
  grid-row: 1/2;
  overflow: auto;  
  border:5px solid blue;
}

#list {
 /* overflow: auto;  not needed*/
  border:5px solid yellow;
}

#list-item {
  font-size: 140px;
}

Run Code Online (Sandbox Code Playgroud)

<html>
<head>
  <meta charset="utf-8">
  <title>Page Title</title>
</head>
<body>
  <div id="header"></div>
  <div id="grid-container">
    <div id="grid-item">
      <div id="list">
        <div id="list-item">1</div>
        <div id="list-item">2</div>
        <div id="list-item">3</div>
        <div id="list-item">4</div>
        <div id="list-item">5</div>
        <div id="list-item">6</div>
      </div>
  </div>
  </div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

您还可以设置overflow:auto为容器，您将在容器上滚动并获得几乎相同的结果

html {
  height: 100%;
  background:#fff;
}

body {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  background:red;
}

#header {
  background-color: brown;
  flex: 0 0 100px;
}

#grid-container {
  flex: 1 1 auto;
  display: grid;
  overflow: auto;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr; 
  border:5px solid green;
}

#grid-item {
  grid-column: 1/2;
  grid-row: 1/2; 
  border:5px solid blue;
}

#list {
 /* overflow: auto;  not needed*/
  border:5px solid yellow;
}

#list-item {
  font-size: 140px;
}

Run Code Online (Sandbox Code Playgroud)

<html>
<head>
  <meta charset="utf-8">
  <title>Page Title</title>
</head>
<body>
  <div id="header"></div>
  <div id="grid-container">
    <div id="grid-item">
      <div id="list">
        <div id="list-item">1</div>
        <div id="list-item">2</div>
        <div id="list-item">3</div>
        <div id="list-item">4</div>
        <div id="list-item">5</div>
        <div id="list-item">6</div>
      </div>
  </div>
  </div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

通过禁用收缩，元素及其内容将溢出到正文之外，并且 html 也会溢出，这将在视口上创建一个滚动条，以便能够看到溢出的内容。在这种情况下添加overflow:auto是没有用的，因为父高度与内容高度相同。

向 body/html 元素添加背景，以便在禁用收缩时更好地看到溢出

html {
  height: 100%;
  background:#fff; /*to stop the propagation of the red color*/
  border:5px dotted purple;
}

body {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  background:red;
}

#header {
  background-color: brown;
  flex: 0 0 100px;
}

#grid-container {
  flex: 1 0 auto;
  display: grid;
  overflow: hidden;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr; 
  border:5px solid green;
}

#grid-item {
  grid-column: 1/2;
  grid-row: 1/2;
  overflow: auto;  
  border:5px solid blue;
}

#list {
 /* overflow: auto;  not needed*/
}

#list-item {
  font-size: 140px;
}

Run Code Online (Sandbox Code Playgroud)

<html>
<head>
  <meta charset="utf-8">
  <title>Page Title</title>
</head>
<body>
  <div id="header"></div>
  <div id="grid-container">
    <div id="grid-item">
      <div id="list">
        <div id="list-item">1</div>
        <div id="list-item">2</div>
        <div id="list-item">3</div>
        <div id="list-item">4</div>
        <div id="list-item">5</div>
        <div id="list-item">6</div>
      </div>
  </div>
  </div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

相关：为什么 Flex-Child 受限于父级大小？

附带说明一下，如果overflow:hidden从容器中删除，两种情况的结果将相同：

html {
  height: 100%;
  background:#fff;
}

body {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  background:red;
}

#header {
  background-color: brown;
  flex: 0 0 100px;
}

#grid-container {
  flex: 1 1 auto;
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr; 
  border:5px solid green;
}

#grid-item {
  grid-column: 1/2;
  grid-row: 1/2;
  overflow: auto;   /*will do nothing*/
  border:5px solid blue;
}

#list {
 /* overflow: auto;  not needed*/
  border:5px solid yellow;
}

#list-item {
  font-size: 140px;
}

Run Code Online (Sandbox Code Playgroud)

<html>
<head>
  <meta charset="utf-8">
  <title>Page Title</title>
</head>
<body>
  <div id="header"></div>
  <div id="grid-container">
    <div id="grid-item">
      <div id="list">
        <div id="list-item">1</div>
        <div id="list-item">2</div>
        <div id="list-item">3</div>
        <div id="list-item">4</div>
        <div id="list-item">5</div>
        <div id="list-item">6</div>
      </div>
  </div>
  </div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

这是由于Flex 项目的自动最小尺寸会阻止收缩效果。

归档时间：	6 年，7 月前
查看次数：	74 次
最近记录：	6 年，7 月前