Relatively positioned content not stacking vertically?

Question

I am trying to stack these elements so that they lie on top of one another, but they end up squishing horizontally instead. What am I doing wrong?

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

Use flex boxes instead. 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

Add flex-direction: column; to the wrapper:

 .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>