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

Question

I'm fighting with quite easy problem. Sections change their max-height on hover. the small span article article__tag should always position at the bottom of its parent (the green line) no matter how much the row will grow and share its easing animation and delay.

This is what I have:

 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

My problem is, on mouse leave the white label jumps up quickly. Further, I've defined it's top with 165px a value which I cannot foresee as the rows have different content.

How can I position the label always on current max-height bottom?

Answer 1

Keep article_tag at bottom always:

 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>