CSS transform scale with flex-direction column - html

Question

I'm trying to use CSS transform: scale(1.5); within a flex container. I need the hidden content to be displayed above and centered to the original text, so to do this I am using flex-direction: column; which works.
The issue is when the transform executes, the sibling html element grows too. (You can see the behavior within the code snippet)
I'm sure I'm missing something simple but I've tried several solutions can't figure out why this is happening. Any help is greatly appreciated.
$(document).ready(function() {
$('[data-action="clickable"]').mousedown(function(item) {
$(item.currentTarget).addClass('flex-item-blowout');
$(item.currentTarget).find('.hidden').addClass('displayed');
$(item.currentTarget).find('.hidden').removeClass('hidden');
});
$('[data-action="clickable"]').mouseup(function(item) {
$(item.currentTarget).removeClass('flex-item-blowout');
$(item.currentTarget).find('.displayed').addClass('hidden');
$(item.currentTarget).find('.displayed').removeClass('displayed');
});
$('[data-action="clickable"]').mouseleave(function(item) {
$(item.currentTarget).removeClass('flex-item-blowout');
$(item.currentTarget).find('.displayed').addClass('hidden');
$(item.currentTarget).find('.displayed').removeClass('displayed');
});
});
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row;
line-height: 30px;
}
.flex-item {
background: burlywood;
color: white;
margin: 3px;
font-weight: bold;
font-size: 1.5em;
min-width: 20%;
max-width: 20%;
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
min-height: 50px;
user-select: none;
}
.flex-item-blowout {
transform: scale(1.5);
background-color: coral;
}
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flex-container">
<div class="flex-item" data-action="clickable">
<span class="hidden">2</span><span>1 + 1</span>
</div>
<div class="flex-item" data-action="clickable">
<span class="hidden">3</span><span>1 + 2</span>
</div>
</div>

Answer 1

Just add align-items: flex-start to the .flex-container, which will prevent the default behavior of the value stretch.
$(document).ready(function() {
$('[data-action="clickable"]').mousedown(function(item) {
$(item.currentTarget).addClass('flex-item-blowout');
$(item.currentTarget).find('.hidden').addClass('displayed');
$(item.currentTarget).find('.hidden').removeClass('hidden');
});
$('[data-action="clickable"]').mouseup(function(item) {
$(item.currentTarget).removeClass('flex-item-blowout');
$(item.currentTarget).find('.displayed').addClass('hidden');
$(item.currentTarget).find('.displayed').removeClass('displayed');
});
$('[data-action="clickable"]').mouseleave(function(item) {
$(item.currentTarget).removeClass('flex-item-blowout');
$(item.currentTarget).find('.displayed').addClass('hidden');
$(item.currentTarget).find('.displayed').removeClass('displayed');
});
});
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row;
line-height: 30px;
align-items: flex-start;
}
.flex-item {
background: burlywood;
color: white;
margin: 3px;
font-weight: bold;
font-size: 1.5em;
min-width: 20%;
max-width: 20%;
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
min-height: 50px;
user-select: none;
}
.flex-item-blowout {
transform: scale(1.5);
background-color: coral;
}
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flex-container">
<div class="flex-item" data-action="clickable">
<span class="hidden">2</span><span>1 + 1</span>
</div>
<div class="flex-item" data-action="clickable">
<span class="hidden">3</span><span>1 + 2</span>
</div>
</div>