CSS: How can I force a display: table-cell box to have a fixed width of 50%?
<p>HTML:</p>

<pre><code>&lt;div id="frontpage_boxes"&gt;
    &lt;div id="frontpage_boxes_inner"&gt;
        &lt;div id="fp_box1" class="fp_box"&gt;...&lt;/div&gt;
        &lt;div id="fp_box2" class="fp_box"&gt;...&lt;/div&gt;
        &lt;div class="clear"&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>#frontpage_boxes {
    margin-bottom:60px;
    margin-top:1vw;
    display:table;
    table-layout:fixed;
}

#frontpage_boxes_inner {
    display:table-row;
}

.fp_box {
    display:table-cell;
    width:50%;
    box-sizing:border-box;
    text-align:center;
    overflow:hidden;
}
</code></pre>

<p>The problem is I need display table-cell for the boxes to have equal height. They also should have equal width. Everything works great as long as there is a lot of space. However if space gets smaller the first box just grows bigger than 50% which breaks the layout. </p>

<p>How can I force a box with display:table-cell to have a width of 50% ignoring possibly available space?</p>