html - 为什么 flex-shrink 在我的例子中会这样？

你能给我解释一下这是怎么回事吗？ (如果可能的话附上 CSS 规范的链接)

当我在 #grid-container 上将 flex-shrink 设置为 0 时(flex: 1 0 auto ), 整个页面出现滚动条

但是当我在 #grid-container 上将 flex-shrink 设置为 1 时(flex: 1 1 auto), bar滚动条只出现在#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>

最佳答案

通过设置 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 将在视口(viewport)上创建一个滚动条以便能够看到溢出的内容。添加 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>

作为旁注，如果您从容器中删除 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这将防止收缩效应。

关于html - 为什么 flex-shrink 在我的例子中会这样？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55396309/

html - 为什么 flex-shrink 在我的例子中会这样？

上一篇：javascript - 如何获取访客设备信息

下一篇：html - 在上下文字符上应用样式会破坏单词