css transition from top 100% to bottom 0 - html

Question

So from this question Transition effects Top vs. Bottom in CSS is not working I can't do top to bottom transition, so how would I go about trying to get an effect like this (but with transition)
function show_box()
{
let box = document.getElementById("box")
box.className += " show";
}
.box {
background-color: red;
top: 100%;
transition: 1s;
position: fixed;
}
.box.show {
top: initial;
bottom: 0;
}
<div id="box" class="box">
sdome box with some large text
<br/>
<br/>
<br/>
<br/>
sdfasdfsdf
</div>
<button onclick="show_box()">Show</button>

Answer 1

function show_box()
{
let box = document.getElementById("box")
box.className += " show";
}
.box {
height: 0px;
width: 300px;
background-color: red;
top: 100%;
-webkit-transition: 1s;
position: fixed;
}
.box.show {
top: initial;
bottom: 0;
height:200px;
-webkit-transition:height 1s;
}
<div id="box" class="box">
</div>
<button onclick="show_box()">Show</button>

Answer 2

function showBox(boxId)
{
let box = document.getElementById(boxId)
box.className += " show";
}
.box {
background: #cdf;
width: 200px;
height: 200px;
position: fixed;
overflow: hidden;
}
.box#box-2 {
left: 220px;
}
.box#box-3 {
left: 430px;
}
.box > .inner {
width: 100%;
position: absolute;
top: 100%;
bottom: 0;
display: flex;
overflow: hidden;
}
.box.show > .inner {
top: 0;
transition: top 2s ease;
}
.box > .inner > .subInner {
position: relative;
width: 100%;
align-self: flex-end;
background: #f00;
}
<div class="box" id="box-1">
<button onClick="showBox('box-1')">Show</button>
<div class="inner">
<div class="subInner">
<p>Some content in box-1</p>
</div>
</div>
</div>
<div class="box" id="box-2">
<button onClick="showBox('box-2')">Show</button>
<div class="inner">
<div class="subInner">
<p>Content of box-2 with different height</p>
<p>Content of box-2</p>
<p>Content of box-2 again</p>
</div>
</div>
</div>
<div class="box" id="box-3">
<button onClick="showBox('box-3')">Show</button>
<div class="inner">
<div class="subInner">
<p>Third box content</p>
<p>Third box content again</p>
</div>
</div>
</div>
I've added fiddle here as snippet.
UPDATE
I changed boxes behavior from css hover to js-button click event and I'm afraid I've no ideas anymore, because fixed position of boxes made rather strict restrictions to possible solutions, which depends on specific conditions of your task.