IGGt IGGt - 3 months ago 10
CSS Question

How to divide space equally between two elements

I have the following set up. It creates 3 groups of items, evenly distributed across the page.
But I can't get the last bit to work.
Where I have

.layeritem_inner
I want these to be divided evenly into two sections, but I can't get them to change size.
I have tried various combinations of
flex-xxx
and
width
but nothing seems to work. What am I missing?



#layerOneOuter
{
display: flex;
flex-wrap: nowrap;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
}

.layerOneInner
{
width:18em;
display: flex;
flex-direction: column;
border:solid black 2px;
text-align:center;
}

.layeritem_column_header
{
flex-basis: auto;
font-weight: bold;
width:100%;
background-color: #CFCFCF;
color: #000000;
}

.layeritem_column_row
{
flex-direction: row;
padding-top: 5px;
border:solid grey 1px;
width:100%;
}

.layeritem_inner
{
border:solid red 1px;
width:5em;
}


<div id="layerOneOuter">
<div class="layerOneInner">
<span class="layeritem_column_header">This is a Header</span>
<span class="layeritem_column_row">
<span class="layeritem_inner">Left Side</span> <!-- This row should take up 50% of the space -->
<span class="layeritem_inner">Right Side</span> <!-- This row should take up 50% of the space -->
</span>
<span class="layeritem_column_row">
<span class="layeritem_inner">Left Side</span>
<span class="layeritem_inner">Right Side</span>
</span>
</div>

<div class="layerOneInner">
<span class="layeritem_column_header">This is a Header</span>
<span class="layeritem_column_row">
<span class="layeritem_inner">Left Side</span>
<span class="layeritem_inner">Right Side</span>
</span>
<span class="layeritem_column_row">
<span class="layeritem_inner">Left Side</span>
<span class="layeritem_inner">Right Side</span>
</span>
</div>

<div class="layerOneInner">
<span class="layeritem_column_header">This is a Header</span>
<span class="layeritem_column_row">
<span class="layeritem_inner">Left Side</span>
<span class="layeritem_inner">Right Side</span>
</span>
<span class="layeritem_column_row">
<span class="layeritem_inner">Left Side</span>
<span class="layeritem_inner">Right Side</span>
</span>
</div>
</div>




Answer

Assign display: flex; to your .layeritem_column_row div, and then give .layeritem_inner a width: 50%;.

CSS

.layeritem_column_row
{
    display: flex;
}   

.layeritem_inner
{
    width:50%;
}

Result

enter image description here

JSFiddle

Comments