Multiple flexbox single row

Question

Is it possible to create multiple flexboxes on a single row, each of the flexboxes will have their own child flex elements?

To be more precised about my requirement, suppose their is a flexbox having 2 flex elements, each having max width of 50% and height of 100%, now there is an option to add additional elements adjacent to this already existing elements, so, that on addition of a new flex element, the total number of elements will be 3 having width of 25%, 25% and 50% and all of the elements has height of 100%, which is possible, but if we want to add the element in a manner such that the width of the elements remain constant, but height is reduced by half, i.e., height of elements will be 50%, 50% and 100% and width of all the elements will be 50% is it possible?

you may want to draw a diagram describing what exactly you want to achieve... — lmaooooo, Dec 12 '17 at 11:58
A child of a flexbox can be a flexbox itself, so just wrap all of the individual flexbox elements in an outer flexbox and it should work how you describe. — delinear, Dec 12 '17 at 12:04
This doesn't appear to be a duplicate...yet. Add a working code snippet, or two, where one show the start and the other the expected outcome. — Asons, Dec 12 '17 at 12:19

Nenad Vracar · Accepted Answer · 2017-12-12T12:08:49.500

You just need to use flex-direction: column on left and right container elements and if you set flex: 1 on child elements each one will take same amount of height.

$('.parent').on('click', '.left > div, .right > div', function() {
  $(this).parent().append('<div />')
})

.parent {
  display: flex;
}
.left,
.right {
  height: 200px;
  flex: 1;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  border: 1px solid black;
}
.left > div,
.right > div {
  flex: 1;
  border: 1px solid green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div class="left">
    <div></div>
    <div></div>
  </div>

  <div class="right">
    <div></div>
  </div>
</div>

Multiple flexbox single row

1 Answers1