最大高度转换使子元素始终位于父元素的底部

Question

我正在与一个非常简单的问题作斗争。部分在悬停时更改其最大高度。小跨度项目CCD_ 1应始终位于其父项(绿线(的底部，无论该行将增长多少并共享其缓和动画和延迟。

这就是我所拥有的：

section{
background: #000;
color: #fff;
display: flex;
max-height: 150px;
border-bottom: 1px solid lightgreen;
transition: max-height .5s ease-in-out;
position: relative;
overflow: hidden;
}
section:hover {
max-height: 400px;
transition-delay: .3s;
}
article {
flex:1;
height: 200px
}
.article__tag {
background: white;
color: #000;
position: absolute;
padding: 10px;
top: 120px;
transition: all .5s ease-in-out;
transition-delay: .3s;
}
section:hover .article__tag {
bottom: 0;
top: inherit;
}

<section>
<article>A</article>
<article><span class="article__tag">tag</span></article>
</section>
<section>
<article>B</article>
<article><span class="article__tag">tag</span></article>
</section>

https://codepen.io/t-book/pen/LYpjVPz

我的问题是，鼠标离开时，白色标签会迅速跳起来。此外，我已经用165px定义了它的顶部，这是一个我无法预见的值，因为行具有不同的内容。

如何将标签始终放置在当前最大高度底部？

Answer 1

始终将article_tag放在底部：

section{
background: #000;
color: #fff;
display: flex;
max-height: 150px;
border-bottom: 1px solid lightgreen;
transition: max-height .5s ease-in-out;
position: relative;
overflow: hidden;
}
section:hover {
max-height: 400px;
transition-delay: .3s;
}
article {
flex:1;
height: 200px
}
.article__tag {
background: white;
color: #000;
position: absolute;
padding: 10px;
bottom: 0px;
transition: all .5s ease-in-out;
transition-delay: .3s;
}

<section>
<article>A</article>
<article><span class="article__tag">tag</span></article>
</section>
<section>
<article>B</article>
<article><span class="article__tag">tag</span></article>
</section>