没有display：flex属性，剪切路径无法正常工作

Question

我正在将剪切路径应用于div 1和div 2，但我不知道为什么它仅适用于div 2。

在尝试时，我发现在body标签中使用display：flex，它对div都正常工作，但是使用该属性，我的大多数div样式都在更改。 由于我的网站即将完成，因此我不想更改其他div样式。

还有其他方法可以使剪切路径在不使用flex属性的情况下适用于div。

请帮我，因为我为此感到困扰了很长时间！

HTML代码

    <section id="particles-js"></section>
    <div class="about-page"><p>DIV 1</p></div>
    <div id="Project"><p>DIV 2</p></div>
    <div class="contact-me-div" id="contact-id"></div>
    <div class="footer z-depth-5"></div>

CSS

body
{
    font-family: 'Ubuntu',sans-serif;
    background: #f5f5f5;
    display: flex;
    flex-direction: column;
    margin: 0px;
}
p
{
    font-size: 50px;
    font-weight: 800;
    text-align: center;
}

#particles-js
{
    height: 50vh;
    width: 100%;
    background: #0F2027;   
    background: linear-gradient(to top right, #112128,#274a5a, #203A43, #0F2027,#081014);   
    overflow: hidden;
    font-family: 'Open Sans Condensed', sans-serif;
    text-align: center;
    line-height: 1.2em;
    z-index: 5;
}

.about-page
{
    z-index: 1;
    padding-bottom: 150px;
    -webkit-clip-path: polygon(0 0, 100% 0%, 100% 90%, 50% 100%, 0 90%);
    clip-path: polygon(0 0, 100% 0%, 100% 90%, 50% 100%, 0 90%);
    background: #f5f5f5; 
    height: 300px;
}

#project
{
    z-index: 0!important;
    background: #eee url("https://subtlepatterns.com/patterns/extra_clean_paper.png");
    padding-top: 170px;
    -webkit-clip-path: polygon(0 0, 100% 0%, 100% 90%, 50% 100%, 0 90%);
    clip-path: polygon(0 0, 100% 0%, 100% 90%, 50% 100%, 0 90%);
    padding-bottom: 100px;
    margin-bottom: 0;
    height: 500px;
    margin-top: -120px;
}
.contact-me-div
{
    height: 500px;
    margin: 0;
    padding: 0;
    margin-top: -120px;
    background: #0F2027;   
    background: -webkit-linear-gradient(to top, #2C5364, #203A43, #0F2027);  
    background: linear-gradient(to top right, #2C5364, #203A43, #0F2027);  
}
.footer
{
    width: 100%;
    text-align: center;
    bottom: 0;
    height: 240px;
    background-color: #112233;
}

我想要什么 带有flex属性的显示方式如何评论。