Force line break after nth element in flexbox layout

Issue

I have following code (simplified):

.container {
  display: flex;
  flex-wrap: wrap;
}

.child-33 {
  height: 50px;
  border: 2px solid;
  width: 33%;
  box-sizing: border-box;
}

.child-50 {
  height: 50px;
  border: 2px solid;
  width: 50%;
  box-sizing: border-box;
}

<div class="container">
  <div class="child-33">1. Row</div>
  <div class="child-33">2. Row</div>
  <div class="child-33">2. Row</div>
  <div class="child-33">2. Row</div>
  <div class="child-50">3. Row</div>
  <div class="child-50">4. Row</div>
  <div class="child-50">4. Row</div>
</div>

the container is set to display flex. each child has flex grow set to 1.

I want every child to have 33% width but I want to break after the first child. The first line should only contain the first element (but with 33% width).The second line should contain 2+3+4. child.

I also have some rows where elements should have 50% width.

I cannot set the first child to 100% width or flex-basis because then every content is scaled to the full width and the div has a border which should not be full width.

Any suggestions? Maybe with :before or :after pseudo elements?

Solution

I could imagine building it something like this, using .cell elements to create the layout including empty cells as padding, and then stretching the cell content across the available width.

.container {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
}
.container * {
  box-sizing: inherit;
}

.cell {
  flex: none;
  display: flex;
  justify-content: stretch;
}

.content {
  flex: auto;
  margin: 2px;
  min-height: 20px;
  padding: 4px;
  border: 2px outset #ccc8;
  border-radius: 4px;
}

.c-2 {
  width: 33.33%;
}
.c-3 {
  width: 50%;
}
.c-6 {
  width: 100%;
}

<div class="container">
  <div class="cell c-2"><div class="content">1. Row</div></div>
  <div class="cell c-2"></div>
  <div class="cell c-2"></div>
  <div class="cell c-2"><div class="content">2. Row<br>...<br>...</div></div>
  <div class="cell c-2"><div class="content">2. Row</div></div>
  <div class="cell c-6"><div class="content">3. Row</div></div>
  <div class="cell c-3"><div class="content">4. Row</div></div>
  <div class="cell c-3"><div class="content">4. Row</div></div>
</div>

Answered By - DustInComp