Использование Flexbox для обертывания 3-х ящиков и их содержимого

Question

Я создал jsfiddle, чтобы проиллюстрировать, что я пытаюсь сделать. Когда размер окна меньше, окна перекрываются. Еще одна проблема, с которой я столкнулся, - это получить текст «читать больше», чтобы перейти в нижнем правом углу каждого окна.

https://jsfiddle.net/natetg/dhaqzy29/1/

<header>header</header> 
<div id='main'> 
<leftCol>left 
    <div class="bottom"> 
     <div class="right">read more</div> 
    </div> 
</leftCol> 
<middleCol>middle 
    <div class="bottom"> 
     <div class="right">read more</div> 
    </div> 
</middleCol> 
<rightCol>right 
    <div class="bottom"> 
     <div class="right">read more</div> 
    </div> 
</rightCol> 
</div> 
<footer>footer</footer> 

Answer 1

#box-container 
{ 
    display:flex; 
    flex-wrap:wrap; 
    justify-content:space-around; 
} 
.box 
{ 
    display:flex; 
    flex-direction:column; 
    flex:1; 
    min-width:250px; 
    height:300px; 
    border:1px solid black; 
} 
.box-title 
{ 
    font-weight:bold; 
} 
.box-text 
{ 
    flex:1; 
} 
.box-read-more 
{ 
    align-self:flex-end; 
} 


<div id="box-container"> 
<div class="box"> 
    <div class="box-title"> 
     Box #1 title 
    </div> 
    <div class="box-text"> 
     Text content for the box goes here. 
    </div> 
    <div class="box-read-more"> 
     Read more... 
    </div> 
</div> 
<div class="box"> 
    <div class="box-title"> 
     Box #2 title 
    </div> 
    <div class="box-text"> 
     Text content for the box goes here. 
    </div> 
    <div class="box-read-more"> 
     Read more... 
    </div> 
</div> 
<div class="box"> 
    <div class="box-title"> 
     Box #3 title 
    </div> 
    <div class="box-text"> 
     Text content for the box goes here. 
    </div> 
    <div class="box-read-more"> 
     Read more... 
    </div> 
</div> 
</div>