Не дать абсолютному ребенку расширить родителя

Question

Итак, у меня есть родительский контейнер с фиксированной высотой и относительной позицией, и в этом контейнере я хочу иметь дочерний элемент с абсолютной позицией, который не расширяет высоту родительского элемента.Вот моя разметка:

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

И мой 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;
}

Моя проблема - это должно работать, есть несколько строк, как это, и мой выпадающий список должен быть выше всего остального, но сейчас он просто увеличивает высоту родительского контейнера, несмотря на то, что он установлен в 7rem.Из того, что я понимаю, элемент с абсолютным позиционированием должен быть взят из естественного потока, но, похоже, он не работает.Вот и моя скрипка, которую я сделал, чтобы проверить это - здесь все работает так, как должно: http://jsfiddle.net/ukswqyo0/4/

Answer 1

Я предполагаю, что ваш синтаксис HTML неверен. Вы написали в своем примере:

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

Но это должно быть

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

Ваша настройка height должна затем на td ... Я обновил вашу скрипку: http://jsfiddle.net/ukswqyo0/16/

см. эту статью