使用 CSS 将元素定位在另一个元素中答案

【问题标题】：Using CSS to positioning an element inside another使用 CSS 将元素定位在另一个元素中
【发布时间】：2018-07-20 16:32:46
【问题描述】：

我有一个包含 DIV，里面有一个较小的 DIV。

较小的 DIV 位于底部，有两行。
默认情况下，第一行在容器 DIV 边界之外，并被 overflow:none 隐藏。
悬停时，较小的 DIV 向上滑动，因此两行都可见。

问题：

当我知道两行的高度时，我可以让它与绝对定位一起工作。
如果我不知道两行的高度，有没有办法做到这一点？

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@                                         @
@          No hover                       @
@                                         @
@                                         @
@                                         @
@                                         @
@                                         @
@     _____________________________       @
@    |                             |      @
@    |                             |      @
@@@@  -----------------------------  @@@@@@
     |                             | 
     |    (this row hidden)        |
     |_____________________________|



@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@                                         @
@          With hover                     @
@                                         @
@                                         @
@                                         @
@      _____________________________      @
@     |                             |     @
@     |                             |     @
@      -----------------------------      @
@     |                             |     @
@     |                             |     @
@     |_____________________________|     @
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

【问题讨论】：

您能否提供一个带有您的代码的示例 html？更好的是，您可以将您的代码添加到 codepen 吗？
@HelloUniverse 是正确的，我们需要查看您的代码。但是，请不要使用 Codepen（或 JSFiddle 等）。相反，请使用内联 sn-p （编辑问题时在图像按钮旁边）。通常应尽可能避免使用外部资源 - 如果它们出现故障，您的问题对未来的读者将变得毫无用处。
好吧，一会儿:)
你能简单地隐藏和显示 row2 而没有任何溢出：隐藏吗？

标签： css flexbox

【解决方案1】：

如果我很了解您的草稿，我会发布我的解决方案。我试着让它变得简单，没有任何溢出：只需显示和隐藏第二行，使用它的最大高度来渲染一个漂亮的幻灯片效果。我认为结果是一样的。我使用 CSS 进行转换，但您也可以根据需要使用 jquery 进行转换。

.parent{
    height: 300px;
    background-color: #ff0000;

    display: flex;
    flex-direction: column;
}
.child{
    margin-top: auto;

    background-color: #00ffff;
}

.child .row2{
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s;
}

.parent:hover .child .row2{
    max-height: 400px;
}

 <div class="parent">
  
    <div class="child">
        <div class="row1" style="background-color:#0000ff">
            Row1 
        </div>
        <div class="row2" style="background-color:#00ff00">
            Hello! Now you can see me but you don't know my height!
        </div>
     </div>
 </div>

【讨论】：