How to put a div above columns of flex displayed elements?

Question

I have a div that is displayed as flex. Inside the div are 3 other elements. I would like that the first element has 100% width and the 2nd and 3rd element should stay beside each other.

Sample code: Codepen

#flex-container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
}
#flex-container > .flex-item {
  -webkit-flex: auto;
  flex: auto;
}
#flex-container > .raw-item {
  width: 5rem;
}
#flex-container {
  width: 100%;
  font-family: Consolas, Arial, sans-serif;
}
#flex-container > div {
  border: 1px solid #f00;
  padding: 1rem;
}
#flex-container > .raw-item {
  border: 1px solid #000;
}
.fullwidth {
  background-color: yellow;
}

<div id="flex-container">
  <div class="fullwidth">full swidth</div>
  <div class="flex-item" id="flex">Flex box (click to toggle raw box)</div>
  <div class="raw-item" id="raw">Raw box</div>
</div>

Here I want to achieve that the yellow div (class = fullwidth) is 100% and above the 2 other elements, without changing the HTML and skipping flex.

Is there a way to achieve this properly?

Answer 1

You can use flex-wrap: wrap on Flex-container and flex: 0 0 100% on div you want to take full-width. Also to make other div's equal width you can use flex: 1

* {
  box-sizing: border-box;
}
#flex-container {
  font-family: Consolas, Arial, sans-serif;
  display: flex;
  flex-wrap: wrap;
}
#flex-container > div {
  border: 1px solid #f00;
  padding: 1rem;
  flex: 1;
}
#flex-container > .raw-item {
  border: 1px solid #000;
}
#flex-container > div.fullwidth {
  background-color: yellow;
  flex: 0 0 100%;
}

<div id="flex-container">
  <div class="fullwidth">full swidth</div>
  <div class="flex-item" id="flex">Flex box (click to toggle raw box)</div>
  <div class="raw-item" id="raw">Raw box</div>
</div>