max-height Transition 使子元素始终位于父元素的底部

Question

我正在与非常简单的问题作斗争。 部分更改了 hover 上的最大高度。 小跨度文章article__tag应该总是 position 在其父级（绿线）的底部，无论行将增长多少并共享其缓动 animation 和延迟。

这就是我所拥有的：

 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

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

我怎样才能 position label 总是在当前最大高度底部？

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>