Prevent absolute child from expanding parent

Question

So I have a parent container with fixed height and position relative and in that container I want to have a child element with position absolute, thath DOESN'T expand parent's height. Here is my markup:

<tr class="talent-box-table__row">
<ul class="dropdown-with-arrow" [ngClass]="{'dropdown-with-arrow--open': isTalentHistoryOpen}">
    <li class="dropdown-with-arrow__option talent-box-table__approver">
        <p class="talent-box-table__approver-name">
            userName
        </p>
        <p class="talent-box-table__status">userDecision</p>
    </li>
    <li class="dropdown-with-arrow__option talent-box-table__approver">
        <p class="talent-box-table__approver-name">
            userName
        </p>
        <p class="talent-box-table__status">userDecision</p>
    </li>
    <li class="dropdown-with-arrow__option talent-box-table__approver">
        <p class="talent-box-table__approver-name">
            userName
        </p>
        <p class="talent-box-table__status">userDecision</p>
    </li>
    <li class="dropdown-with-arrow__option talent-box-table__approver">
        <p class="talent-box-table__approver-name">
            userName
        </p>
        <p class="talent-box-table__status">userDecision</p>
    </li>
</ul>
</tr>

And my CSS:

.talent-box-table__row {
  position: relative;
  height: 7rem;
}

.dropdown-with-arrow {
  position: absolute;
  z-index: 10000000;
  top: 50%;
  left: 50%;
  height: 15rem;
  width: 15rem;
}

My problem is - it should work, there are couple rows like this, and my dropdown should be ABOVE everything else, but right now it just expands parent container height, despite having it set to be 7rem. From what I understand, absolute positioned element should be taken off natural flow, but it look like it doesn't work. Here is also my fiddle that I've made to check it - here everything is working like it should: http://jsfiddle.net/ukswqyo0/4/

Not sure if this is what you want, but setting `overflow: hidden;` or `overflow: scroll;` on the parent `div` of your JSFiddle example would allow you to keep the child from expanding parent's height. — sequel, Sep 17 '18 at 09:02
overflow: hidden hides a part of dropdown and that is not what I want, and I don't want a scroll either. — grhu, Sep 17 '18 at 09:05
from your fiddle it should work as u expected rite? what u described was to make the absolute element to have its own height hence the 300px is set, and it's not taking the 200px height of the parent.. — Erwin Sanders, Sep 17 '18 at 09:16
Since ul is a direct child of tr, that makes your html invalid, https://stackoverflow.com/questions/12634715/which-dom-elements-can-be-child-of-tr — VXp, Sep 17 '18 at 09:40

score 0 · Answer 1 · answered Sep 17 '18 at 09:26

My guess is, that your HTML syntax is wrong. You wrote in your example:

<tr><ul>...</ul></tr>

But it should be

<tr>
  <td><ul>...</ul></td>
</tr>

Your height setting should then on the td ... I updated your fiddle: http://jsfiddle.net/ukswqyo0/16/

see this article

Prevent absolute child from expanding parent

1 Answers1