将父元素高度设置为每个父元素的每个子元素的最高高度

Question

我使用选项卡来显示内容，我的选项卡按钮位于选项卡内容下方。当我将鼠标悬停在选项卡按钮上时，会显示选项卡内容。

在下面的 HTML 中，内联样式是我想要完成的。

<div class="item">
    <div class="tab-content-wrapper" style="height: 293px;">
        <div class="tab-content">Content</div> <!-- Dynamic height is 120px -->
        <div class="tab-content">Content</div> <!-- Dynamic height is 293px -->
        <div class="tab-content">Content</div> <!-- Dynamic height is 175px -->
    </div>
    <div class="tab-buttons-wrapper">
        <div class="tab-button">Tab 1</div>
        <div class="tab-button">Tab 2</div>
        <div class="tab-button">Tab 3</div>
    </div>
</div>
<div class="item">
    <div class="tab-content-wrapper" style="height: 187px;">
        <div class="tab-content">Content</div> <!-- Dynamic height is 187px -->
        <div class="tab-content">Content</div> <!-- Dynamic height is 220px -->
        <div class="tab-content">Content</div> <!-- Dynamic height is 165px -->
    </div>
    <div class="tab-buttons-wrapper">
        <div class="tab-button">Tab 1</div>
        <div class="tab-button">Tab 2</div>
        <div class="tab-button">Tab 3</div>
    </div>
</div>

我试图通过将标签内容包装器的高度设置为等于具有最大高度的标签内容来防止标签按钮根据标签内容的高度向上或向下移动，而不指定固定高度。不过，我的代码将所有 tab-content-wrappers 的高度设置为相同的高度。

var maxheight = 0;
$('.item .tab-content-wrapper .tab-content').each(function () {
    maxheight = $(this).height() > maxheight ? $(this).height() : maxheight;
    $(this).closest('.tab-content-wrapper').height(maxheight);      
});