Make flex item take 100% width of new line - html

Question

I have HTML structure like:
<div class="container">
<div class="btn-1"></div>
<div class="btn-2"></div>
<div class="btn-3"></div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A veritatis harum illum assumenda odio ut, quos, ipsam molestias et sint nemo, saepe! Soluta a, quasi sequi, ut corrupti eius molestias.
</div>
</div>
btn-1 should be aligned to the top left, all other buttons (btn-2, btn-3...) should be aligned to the top right.
The text after all these buttons should be 100% width.
Quick mockup:
I figured out the first part (buttons) with:
.container {
display: flex;
justify-content: flex-end;
}
.btn-1 {
/* align first button to the left */
margin-right: auto;
}
Bu not matter what I do, the text doesn't flow to the next line...
Here's my JSFiddle https://jsfiddle.net/an0o7taq/
Thanks for any help!

Answer 1

You need to add flex-wrap: wrap to the container.
By default, flex containers are set to flex-wrap: nowrap, forcing items to remain on a single line.
revised jsfiddle
Spec reference:
5.2. Flex Line Wrapping: the flex-wrap property

Answer 2

You need more container with different flex flows and styles. Tip: learn most important flex props: align-items, flex-flow, justify-content. They all apply to the direct children of the container. So when you want your layout you need more container with different flex flows.
This guide helped me a lot. They also have great examples:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.container {
display: flex;
flex-flow: column nowrap;
}
.header {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
.header-left, .header-right {
display: flex;
flex-flow: row nowrap;
}
.btn {
width: 40px;
height: 40px;
border: 1px solid #ddd;
background-color: #eee;
}
.text {
width: 100%;
}
<div class="container">
<div class="header">
<div class="header-left">
<div class="btn">btn1</div>
</div>
<div class="header-right">
<div class="btn">btn2</div>
<div class="btn">btn3</div>
</div>
</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A veritatis harum illum assumenda odio ut, quos, ipsam molestias et sint nemo, saepe! Soluta a, quasi sequi, ut corrupti eius molestias.
</div>
</div>