Css 绝对位置在相对位置内的问题

我在尝试在相对定位元素中创建一个灵活的绝对定位元素时遇到了一个问题。代码如下：

当

.active

div中的

.content

div具有最大高度值时，上述代码工作正常。（

internal-3

在本例中）

但是如果在任何其他

内部
元素（文本较少）上设置
.active
类，则来自最大元素（
内部-3
）的内容溢出（）

我可以使用JavaScript解决这个问题，但我希望有一个纯css解决方案来解决这个问题，这样所有
内部
元素都具有相同的高度，而不提供固定的高度，以便它们的高度随着容器宽度的变化而动态变化（在响应性布局中）

注意：
不必指定基于像素的边距/宽度。我不得不稍微调整css，使其在JSFIDLE中工作。它们都在我的原始样式表中的%或ems中。
尝试隐藏所有
。内部
div，并且只显示活动div

.inner .content {
    background: none repeat scroll 0 0 #CCCCCC;
    margin-top: -4em;
    padding: 0.5em;
    display: none;}
.inner.active .content{
    display: block;
    }

更新：如果需要内部div的大小相同，则不能绝对定位、浮动、隐藏或内联显示。因此，我做了以下工作：


flex容器的位置是相对的，并提供足够的填充，使其内部的元素可以定位在左上角，并正确定位。我还将字体大小设置为0，并防止包装
内部div显示为内联块，宽度为0
活动内部块的宽度为100%，因此它是唯一显示的块
H1绝对定位，并放置在您想要的位置


你们需要使用填充物、间距等。哦，我只在FireFox上测试过这一点-其他浏览器可能会有问题。
正如我提到的，我需要所有
内部
元素具有相同的高度。在这种情况下，您必须将所有内部div定位为静态或相对，以确保它们都对大小有贡献。可能同时使用
display:inline block
、
visibility:hidden
和
width:0px
（显然对活动div使用
visibility:visibility
和
width:auto
）我尝试过，但没有成功。你能在这里试一试吗：