Flexbox columns with dynamic item height - html

Question

I have a flexbox with two columns. The items need to stay in their specified columns but each item should be able to expand its height when the user clicks 'read more' on an item. The effect would be to increase the size of the flexbox rather than have items wrap to the next column.
Also the items text needs to be positioned 50% from the top of the item (due to background shading). I've attempted to position the text using absolute positioning but this means the text is overflowing the container.
Here's a JSFiddle: http://jsfiddle.net/2adxLja2/3/
$(document).ready(function() {
$("#expand").click(function() {
$("#readmore").removeClass("hidden");
});
});
.grid {
display: flex;
flex-flow: column wrap;
height: 450px;
}
.container {
position: relative;
border: 3px solid blue;
min-height: 150px;
width: 250px;
margin-bottom: 5px;
background-image: linear-gradient(to bottom, rgba(18, 59, 107, 0), rgba(18, 59, 107, 1) 50%, rgba(18, 59, 107, 1));
}
.filler {
height: 50%;
}
.item {
position: absolute;
top: 50%;
color: white;
}
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid">
<div class="container">
<div class="filler">
<span> </span>
</div>
<div class="item" id="item1">
<span>Tile 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras urna elit, sollicitudin sed mauris vitae
</span>
<button id="expand">Read more</button>
<span class="hidden" id="readmore">
sollicitudin sed mauris vitae, lobortis aliquam turpis. Nullam urna metus, sollicitudin in fermentum eget, sagittis vitae diam
</span>
</div>
</div>
<div class="container">
<div class="item">
<span>Tile 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras urna elit, sollicitudin sed mauris vitae, lobortis aliquam turpis. Nullam urna metus, sollicitudin in fermentum eget, sagittis vitae diam
</span>
</div>
</div>
<div class="container">
<div class="item">
<span>Tile 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras urna elit, sollicitudin sed mauris vitae, lobortis aliquam turpis. Nullam urna metus, sollicitudin in fermentum eget, sagittis vitae diam
</span>
</div>
</div>
</div>

Answer 1

You can try playing with max-height of the text element in order to hide some part of it. Also no need to use position:absolute as you can simply consider margin-top.
Here is an example (I replaced the click with hover)
.grid {
display: flex;
flex-flow: column wrap;
height: 450px;
}
.container {
position: relative;
border: 3px solid blue;
min-height: 150px;
width: 250px;
margin-bottom: 5px;
background-image: linear-gradient(to bottom, rgba(18, 59, 107, 0), rgba(18, 59, 107, 1) 50%, rgba(18, 59, 107, 1));
}
.item {
margin-top: 30%;
color: white;
max-height: 50px;
overflow: hidden;
cursor:pointer;
transition:0.5s;
}
.item:hover {
max-height: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid">
<div class="container">
<div class="item" id="item1">
<span>Tile 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras urna elit, sollicitudin sed mauris vitae
sollicitudin sed mauris vitae, lobortis aliquam turpis. Nullam urna metus, sollicitudin in fermentum eget, sagittis vitae diam
</span>
</div>
</div>
<div class="container">
<div class="item">
<span>Tile 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras urna elit, sollicitudin sed mauris vitae, lobortis aliquam turpis. Nullam urna metus, sollicitudin in fermentum eget, sagittis vitae diam
</span>
</div>
</div>
<div class="container">
<div class="item">
<span>Tile 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras urna elit, sollicitudin sed mauris vitae, lobortis aliquam turpis. Nullam urna metus, sollicitudin in fermentum eget, sagittis vitae diam
</span>
</div>
</div>
</div>