sizing a flexbox within a flexbox

Question

I have flexbox that I want to place two more flexboxes in.

.Summary_Row{
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: stretch;
    align-items: stretch;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-flow: row;
    flex-flow: row;
    width: 100%;
    margin-top: 10px;
    border-bottom: 2px solid #d3d3d3;
    }

.col_left{ order:1; width: 33%; display:flex; justify-content: center; text-align: center;}
.col_center{order:2; width: 33%; display:flex; justify-content: center;  border-right: 2px solid #d3d3d3; border-left: 2px solid #d3d3d3; text-align: center;}
.col_right{ order:3; width: 33%; display:flex; justify-content: center; text-align: center;}


    .int_row{
     display: -webkit-flex;
     display: flex;
     -webkit-align-items: center;
     align-items: center;
     -webkit-justify-content: center;
     justify-content: center;
     -webkit-flex-flow: row;
     flex-flow: row;
     width: 100%;
    }


#inside_left{order:1; display:flex; justify-content: center; align-items: center; width: 25%;}
#inside_right{order:2;  display:flex; flex-flow: column; justify-content: center; width: 75%; text-align:left;}

In my CSS above, I have a flexbox (summary_row) that is split into three equal columns. For col_right, I want to further split that into two more boxes side by side, one taking up 25% and the other 75% of col_right. I have int_row which I thought should contain inside_left and inside_right, but don't know if that's superfluous. Even though I have int_row set to 100%, the width actually doesn't extend the even close to the full width of col_right.

Blue in the image above is int_row and green is inside_right. Notice that the blue doesn't come close to being 100% of the width. I basically don't want the image and green to overlap. I'm thinking if the width is extended more, the overlap wouldn't occur.

Any suggestions on how I can achieve this or if I'm even thinking about this correctly?

Add your HTML also for better understanding with a fiddle link — Santhosh Kumar, Oct 20 '16 at 05:13

score 0 · Accepted Answer · answered Oct 20 '16 at 07:45

I've made a working example for you on CodePen.

html:

<div class="row">
  <div class="row__left">.row__left</div>
  <div class="row__center">.row__center</div>
  <div class="row__right">
    <div class="row__right-a">.row__right-a</div>
    <div class="row__right-b">.row__right-b</div>
  </div>
</div>

css:

.row {
  display: flex;
  border: 1px solid #000;
  padding: .5em;
}

.row__left,
.row__center,
.row__right {
  flex: 0 0 33.3333333%;
  border:1px solid red;
  padding: .5em;
  box-sizing: border-box;
}

.row__right {
  display: flex;
}

.row__right-a {
  flex: 0 0 25%;
  background-color: blue;
}
.row__right-b {
  flex: 0 0 75%;
  background-color: green;
}

You did not need the extra .int_row element. Because a flex item (child) can also be a flex container.

You should also use flex-basis and flex-grow instead of width when trying to make grids with flexbox. I used the shorthand flex property. It's always a good idea to use the flex shorthand property because it forces you to set the flex-grow, shrink and basis value. Some browsers (IE) don't have the right default values so that will save you some trouble.

Also, this is the go to article to get started with Flexbox.

sizing a flexbox within a flexbox

1 Answers1