html - Flex item 的自动 margin 减少了 parent 的 padding

Question

当元素 (#box) 的高度大于屏幕时，父容器 (#wrap) 的底部填充被切断。

普通 View ，应用了#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>