相對定位的內容不是垂直堆疊？

Question

我想堆疊這些元素，使它們躺在另一個之上，但它們最終會水平地壓扁。我究竟做錯了什麼？

HTML：

.content-wrapper { 
 
     position: absolute; 
 
     top: 0; 
 
     left: 0; 
 
     height:100%; 
 
     width:100%; 
 
     display: flex; 
 
     align-items: center; 
 
     justify-content: center; 
 
    } 
 
    .content-box { 
 
     background-color: #f2f2f2; 
 
     padding: 5vh 5vw; 
 
     font-family: "Roboto"; 
 
     color: #676767; 
 
     text-align: center; 
 
     max-width: 60vw; 
 
     position: relative; 
 
     z-index:10; 
 
     margin: 1vh 
 
    }

<div class="content-wrapper"> 
 
     <div class="content-box"> 
 
      <span class="title"> Stats </span> 
 
      <br> 
 
      <div class="sep"></div> 
 
      <p> Lorem ipsum 1 </p> 
 
     </div> 
 
    
 
     <div class="content-box"> 
 
      <span class="title"> Stats </span> 
 
      <br> 
 
      <div class="sep"></div> 
 
      <p> Lorem ipsum 2 </p> 
 
     </div> 
 
    </div>

Answer 1

使用Flex盒代替。 flex direction

.box-list { 
 
    padding: 10px; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 
.box { 
 
    flex: 0 0 auto; 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: #ccc; 
 
    
 
    margin-bottom: 10px; 
 
}

<section class="box-list"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
</section>

Answer 2

添加flex-direction: column;到包裝：

.content-wrapper { 
 
     position: absolute; 
 
     top: 0; 
 
     left: 0; 
 
     height:100%; 
 
     width:100%; 
 
     display: flex; 
 
     flex-direction: column; 
 
     align-items: center; 
 
     justify-content: center; 
 
    } 
 
    .content-box { 
 
     background-color: #f2f2f2; 
 
     padding: 5vh 5vw; 
 
     font-family: "Roboto"; 
 
     color: #676767; 
 
     text-align: center; 
 
     max-width: 60vw; 
 
     position: relative; 
 
     z-index:10; 
 
     margin: 1vh 
 
    }

<div class="content-wrapper"> 
 
     <div class="content-box"> 
 
      <span class="title"> Stats </span> 
 
      <br> 
 
      <div class="sep"></div> 
 
      <p> Lorem ipsum 1 </p> 
 
     </div> 
 
    
 
     <div class="content-box"> 
 
      <span class="title"> Stats </span> 
 
      <br> 
 
      <div class="sep"></div> 
 
      <p> Lorem ipsum 2 </p> 
 
     </div> 
 
    </div>