flex model: second row with width of element of first row - css

Question

I don't understand the flex model completly. In this example the elements of the first row (first and second) should be shown in a row: The first element 200px and the second one should have the rest space.
.wrapper {
display: flex;
width: 100%;
}
.first {
width: 200px;
background: red;
}
.second {
flex: 1;
background: blue;
}
<div class="wrapper">
<div class="first">first left</div>
<div class="second">first right</div>
</div>
Now I want to add a third element, which should be placed right below the second one with the same width then the second element. So it shouldn't have 100% of the complete page, but only be shown below the second element.
<div class="wrapper">
<div class="first">first left</div>
<div class="second">first right</div>
<div class="third">second</div>
</div>

Answer 1

You could do it this way, using the calc functionality.
.wrapper {
display: flex;
display: -webkit-flex;
width: 100%;
flex-flow: row wrap;
-webkit-flex-flow: row wrap;
justify-content: flex-end;
}
.first {
width: 200px;
background: red;
}
.second {
width: calc(100% - 200px);
background: blue;
}
.third {
background: yellow;
width: calc(100% - 200px);
}
<div class="wrapper">
<div class="first">first left</div>
<div class="second">first right</div>
<div class="third">second right</div>
</div>