Ggtcf

I'm trying to "stack" divs on top of each other as new div boxes (.dialog-box) are added to the parent container (.dialog-container).

To stack the elements, I'm using the following on the parent:

display: flex;
flex-direction: column;
justify-content: flex-end;

I'd like to scroll that container for .dialog-boxs that are overflowing, yet with flex-box the overflow-y: scroll; is not scrolling.

Two boxes: (fill up container from bottom to top as expected):

Six boxes (expands outside the height of the container and should scroll):

SCSS:

.dialog-container 
 border: 4px solid rgba(255, 255, 255, .4);
 border-radius: 5px;
 width: 300px;
 height: 340px;
 position: relative;
 top: -50px;
 margin: 0 auto;
 overflow-y: scroll;
 z-index: 5;
 display: flex;
 flex-direction: column;
 justify-content: flex-end;

 .dialog-box 
 width: 90%;
 background: $dialogBoxWhite;
 margin-bottom: 20px;
 border-radius: 8px;
 border: 5px solid $dialogBoxGreenBorder;
 color: $dialogBoxGreenFont;
 text-align: center;
 margin-left: 5px;
 padding: 5px;
 display: inline-block;
 p 
 

HTML:

<div class="dialog-container">
 <div class="dialog-box"></div>
 <div class="dialog-box"></div>
 <div class="dialog-box"></div>
 <div class="dialog-box"></div>
 <div class="dialog-box"></div>
 <div class="dialog-box"></div>
</div>

update answer, I confused a value of flex-direction.

'row' is right not 'column'

add css in .dialog-container

flex-direction: row;

flex-wrap : wrap;

or

flex-flow: row wrap

Try to change display: flex; to display: flex-box;

This will give you a scroll bar that actually scrolls. Additionally, your examples divs are all lacking closing tags.

https://jsfiddle.net/Lpw0726j/23/

<div class="dialog-container">
 <div class="dialog-box">9</div>
 <div class="dialog-box">8</div>
 <div class="dialog-box">7</div>
 <div class="dialog-box">6</div>
 <div class="dialog-box">5</div>
 <div class="dialog-box">4</div>
 <div class="dialog-box">3</div>
 <div class="dialog-box">2</div>
 <div class="dialog-box">1</div>
</div>


.dialog-container 
 border: 4px solid rgba(255, 255, 255, .4);
 border-radius: 5px;
 width: 300px;
 height: 340px;
 position: relative;
 top: 50px;
 margin: 0 auto;
 z-index: 5;
 display: flex-box;
 flex-direction: column;
 justify-content: flex-end;
 overflow-y: auto;
 background-color: teal;


 .dialog-box 
 width: 90%;
 background: black;
 margin-bottom: 20px;
 border-radius: 8px;
 border: 5px solid red;
 color: green;
 text-align: center;
 margin-left: 5px;
 padding: 5px;
 display: inline-block;
 p