Question

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

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

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

出现

在＃grid-container 上 flex-shrink 下面的代码段中，设置为 0 （flex: 1 0 auto）。将其更改为 1 （flex: 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;
}

<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>

Answer 1

通过设置flex-shrink:1（默认值），您可以允许元素在其flex容器内收缩，并且由于您将body（flex容器）设置为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;
}

<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>

您还可以将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;
}

<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>

通过禁用缩小，元素及其内容将在体外溢出，还有html会在视口上创建滚动条以查看溢出内容的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;
}

<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>

相关：Why is a flex-child limited to parent size?

请注意，如果您从容器中删除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;
}

<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>

这是由于The Automatic Minimum Size of Flex Items会阻止收缩效果。

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

1 个答案: