Flex项目的自动边距减少了父级的填充

Question

当项（#box）的高度大于屏幕的高度时，父容器的（#wrap）的底部填充将被切除。

普通视图，已应用#wrap的底部和顶部填充：

html, body {
  
    height: 100%;
  
}

#wrap {
  
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  height: 100%;
  
}

#box {
  
    padding: 20px;
    background: red;
    margin: auto;
  
}

<div id="wrap">

<div id="box">
CONTENT
<br>
CONTENT
<br>
CONTENT
<br>CONTENT
<br>
CONTENT
<br>
CONTENT
<br>
CONTENT
<br>
</div>

</div>

Answer 1

您可以使用此代码

        html {
            height: 100%;
        }
        body {
            margin: 0;
            padding: 0;
            height: 100%;
        }
        #wrap {
            width: 100%;
            padding: 20px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            height: 100%;
        }
        #box {
            padding: 20px;
            background: red;
            margin: 20px auto;
        }

    <div id="wrap">
        <div id="box">
            CONTENT
            <br> CONTENT
            <br> CONTENT
            <br> CONTENT
            <br> CONTENT
            <br> CONTENT
            <br> CONTENT
            <br>
        </div>
    </div>