为什么在此布局中忽略溢出？

Question

大家好我有一个用flexbox制作的布局，包含一个标题，一个填充所有剩余空间的内容和一个内容框。 你可以在这里看到基本代码：

.app {
  display: flex;
  flex-direction: column;
  background-color: white;
  height: 100vh;
}

.header {
  flex: 0 1 auto;
  height: 50px;
  background-color: green;
}

.content {
  flex: 1 0 auto;
  background-color: blue;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-y: auto;
}

.box {
  width: 400px;
  background-color: yellow;
  margin: 20px;
}

<div class="app">
  <div class="header">
    HEADER
  </div>
  <div class="content">
    <div class="box">
      Box<br> Box
      <br> Box
      <br> Box
      <br> Box
      <br> Box
      <br> Box
      <br> Box
      <br> Box
      <br> Box
      <br> Box
      <br>

    </div>
  </div>
</div>

https://jsfiddle.net/0gm3w9yo/

问题是，当你减小窗口高度以触发滚动条（因此小于黄色框高度）时，为什么

.content {
    overflow-y: auto;
    ....
}

被忽略了吗？

我想要一个滚动条来滚动.content，而不是.header。我错过了什么？

Answer 1

  

为什么在此布局中忽略overflow-y？

因为你告诉它无法缩小flex: 1 0 auto

更改为flex: 1 1 auto

＆＃13;

＆＃13;

html, body { margin: 0 }

.app {
  display: flex;
  flex-direction: column;
  background-color: white;
  height: 100vh;
}

.header {
  flex: 0 1 auto;
  height: 50px;
  background-color: green;
}

.content {
  flex: 1 1 auto;                     /*  changed flex-shrink to 1  */
  background-color: blue;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-y: auto;
}

.box {
  width: 400px;
  background-color: yellow;
  margin: 20px;
}

＆＃13;

<div class="app">
  <div class="header">
  HEADER
  </div>
  <div class="content">
    <div class="box">
    Box<br>
    Box<br>
    Box<br>
    Box<br>
    Box<br>
    Box<br>
    Box<br>
    Box<br>
    Box<br>
    Box<br>
    Box<br>
    Box<br>
    Box<br>

    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

第二个问题是justify-content: center; align-items: center;，当太大时会在顶部/底部（或左/右）产生溢出，因此请在flex项目上使用自动边距

Src：https://www.w3.org/TR/css-flexbox-1/#valdef-justify-content-center

＆＃13;

＆＃13;

html, body { margin: 0 }

.app {
  display: flex;
  flex-direction: column;
  background-color: white;
  height: 100vh;
}

.header {
  flex: 0 1 auto;
  height: 50px;
  background-color: green;
}

.content {
  flex: 1 1 auto;                     /*  changed flex-shrink to 1  */
  background-color: blue;
  display: flex;
  align-items: flex-start;            /*  IE fix  */
  overflow-y: auto;
  padding: 20px;                      /*  instead of margin on the item  */
}

.box {
  margin: auto;
  width: 400px;
  background-color: yellow;
}

＆＃13;

<div class="app">
  <div class="header">
  HEADER
  </div>
  <div class="content">
    <div class="box">
    Box<br>
    Box<br>
    Box<br>
    Box<br>
    Box<br>
    Box<br>
    Box<br>
    Box<br>
    Box<br>
    Box<br>
    Box<br>
    Box<br>
    Box<br>

    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

为.box提供身高。在下面的代码段中，我使用了vh。

然后将overflow属性移至.box

fiddle

.app {
  display: flex;
  flex-direction: column;
  background-color: white;
  height: 100vh;
}

.header {
  flex: 0 1 auto;
  height: 50px;
  background-color: green;
}

.content {
  flex: 1 0 auto;
  background-color: blue;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  width: 400px;
  background-color: yellow;
  margin: 20px;
  max-height: 50vh;
  overflow-y: auto;
}

<div class="app">
  <div class="header">
    HEADER
  </div>
  <div class="content">
    <div class="box">
      Box<br> Box
      <br> Box
      <br> Box
      <br> Box
      <br> Box
      <br> Box
      <br> Box
      <br> Box
      <br> Box
      <br> Box
      <br>

    </div>
  </div>
</div>

Answer 3

您需要修改.header和.content

的样式

您需要先添加flex-basis: 50px;来修正标题的高度 然后设置内容部分flex-basis: auto;

.header {
    /* flex: 0 1 auto; */
    /* height: 50px; */
    background-color: green;
    flex-basis: 50px;
    flex-grow: 0;
    flex-shrink: 0;
}


.content {
    /* flex: 1 0 auto; */
    background-color: blue;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-y: auto;
    flex-basis: auto;
    flex-grow: 1;
    flex-shrink: 1;
}

.app {
  display: flex;
  flex-direction: column;
  background-color: white;
  height: 100vh;
}

.header {
    /* flex: 0 1 auto; */
    /* height: 50px; */
    background-color: green;
    flex-basis: 50px;
    flex-grow: 0;
    flex-shrink: 0;
}


.content {
    /* flex: 1 0 auto; */
    background-color: blue;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-y: auto;
    flex-basis: auto;
    flex-grow: 1;
    flex-shrink: 1;
}

.box {
  width: 400px;
  background-color: yellow;
  margin: 20px;
}

<div class="app">
  <div class="header">
    HEADER
  </div>
  <div class="content">
    <div class="box">
      Box<br> Box
      <br> Box
      <br> Box
      <br> Box
      <br> Box
      <br> Box
      <br> Box
      <br> Box
      <br> Box
      <br> Box
      <br>

    </div>
  </div>
</div>