使左浮动扩展以匹配两个右浮动兄弟

Question

我有一个装有 3 个盒子的容器。两个盒子向右浮动，占据了父 div 高度的 50% 左右（overflow-y: 隐藏在父 div 上），所以它们的大小相同。他们有一个浮动到左边的兄弟姐妹，我想根据它的 2 个兄弟姐妹的高度（因此是父高度）扩展高度。

如果可以避免的话，我不想将父级设置为固定高度（因为如果浏览器大小发生变化，它可以改变大小）。

一个JsFiddle

  <article>
    <div class="box-container">
        <section class="box-half left-box">
            <h3>Bigger box</h3>

            <div class="chart">
                <p>I want this box to fill the entire height</p>
            </div>
        </section>

        <section class="box-half">
            <div>
                <h3>One half box</h3><span>With some text</span>
            </div>
        </section>

        <section class="box-half">
            <div>
                <h3>Another half box</h3><span>With another text</span>
            </div>
        </section>
    </div>
</article>




 *, *:before, *:after {
    box-sizing: border-box;
}

.left-box {
    background: white !important; 
}

.box-container {
    overflow-y: hidden;
}

article {
    width: 100%;
    background: green;
}

.box-full,
.box-half {
    width: 100%;
    float: left;
    padding: 0.25em;
    text-align: center;
}

.box-half {
    width: 50%;
    background: blue;
}

Answer 1

您可以尝试使用display:table 和display:table-cell 而不是float...见this Fiddle