Using CSS to positioning an element inside another

Question

I have a containing DIV with a smaller DIV inside.

The smaller DIV is positioned right at the bottom and has two rows.
By default the first row is outside the container DIV bounds, and is hidden by overflow:none.
On hover, the smaller DIV slides upwards so both rows are visible.

Question:

I can get this to work with absolute positioning when I know the height of the two rows.
Is there a way to do this if I don't know the height of the two rows?

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



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

Can you provide a sample html please with your code? Better yet, can you add your code to codepen? — Hello Universe, Jul 20 '18 at 03:56
@HelloUniverse Is correct, we'll need to see your code. However, please refrain from using Codepen (or JSFiddle, etc). Instead, use an inline snippet (next to the Image button when editing your question). External resources should generally be avoided where possible - in the event they go down, your question would become useless to future readers. — Tyler Roper, Jul 20 '18 at 04:00
Could you simply hide & show row2 without any overflow:hidden? — ReSedano, Jul 20 '18 at 07:51

score 0 · Answer 1 · answered Jul 20 '18 at 08:32

I post my solution, if I well understand your draft. I try to make it easy, without any overflow: just show & hide the second row working with its max-height to render a nice slide effect. I think the result is the same. I do the transition with CSS but you can do this also with jquery, as you want.

.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>

Using CSS to positioning an element inside another

1 Answers1