Raphael Kleindienst Raphael Kleindienst - 8 days ago 6
CSS Question

CSS: Flexbox within Flexbox

I was playing around with the flexboxes a little and wanted to combine a column and row container. The question I have is:

Why do the row elements placed within the column not span the entire width of the flex-container?

The example code is shown here: js-fiddle

HTML:



/* CSS: */

.flex-container {
color: blue;
background-color:yellow;
text-decoration: bold;
text-size: 1em;
display: flex;
justify-content:space-between;
align-items:center;
}
.horizontal {
flex-direction:row;
background-color: red;
}

.vertical {
flex-direction:column;
}

<body>
<div class="flex-container vertical">
<div class=flex-item>1 </div>
<div class=flex-item>2 </div>
<div class="flex-container horizontal" >
<div class=flex-item>3a </div>
<div class=flex-item>3b </div>
<div class=flex-item>3c </div>
</div>
<div class=flex-item>4 </div>
<div class=flex-item>5 </div>
</div>
</body>





Thanks for any help!

Answer

This is because of the way Flexbox works.

Since the .horizontal container is a flex child itself, it automatically adjusts to the size of the other childs. Only allowing space for the overflowing content, which are the childs of the .horizontal itself.

Manually applying the width will result in the space being created for the items, and the justify-content: space-between will kick in.

Solution, change the following rule:

.horizontal {
    flex-direction: row;
    background-color: red;
    width: 100%;
}