Elements in a flex container are not wrapping - html

Question

When I try to insert block elements in a flex container, they all stay on the same line as if they were inline-blocks.
I would like the two first div's to be on the same line, and the last one to be on a second line. Sadly, that doesn't seem to work.
Anyone have any idea ?
<div style="display: flex">
<div style="display: inline-block">
This is an inline block element
</div>
<div style="display: inline-block">
This is an inline block element
</div>
<div style="display: block">
This is a block element
</div>
</div>

Answer 1

An initial setting of a flex container is flex-wrap: nowrap. This means flex items are forced to remain in a single line.
You can override the default with flex-wrap: wrap.
The display value of flex items is ignored in flex layout.
A flex container, which is an element with display: flex or display: inline-flex, establishes a flex formatting context. Although similar to a block formatting context, there are differences.
One difference is that children of a flex container ignore the display property.
Another difference is that, in a flex container, margins don't collapse, and the float and clear properties have no effect.
A flex container also comes with several default settings. Among them:
justify-content: flex-start - flex items will stack at the start of the line
flex-shrink: 1 - flex items are allowed to shrink and will not overflow the container
align-items: stretch - flex items will expand to cover the cross-size of the container
flex-direction: row - flex items will align horizontally
flex-wrap: nowrap - flex items are forced to stay in a single line
Note the last two items.
Flex items will line up in a row and cannot wrap.
If you want to have two flex items on the first line, and a third item on the second line, allow the container to be multi-line with flex-wrap: wrap.
.container {
display: flex;
flex-wrap: wrap;
}
.box {
flex: 0 0 45%;
height: 50px;
margin: 5px;
background-color: lightgreen;
border: 1px solid #ccc;
}
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
Also, if you want flex containers to display inline, use display: inline-flex not display: flex. These are comparable to display: inline-block and display: block.

Answer 2

use flex-wrap:wrap in parent because by default the flex-wrap is nowrap
use flex-basis:50% in child, to divide both inline-block elements in same size.
See more detailed info about flexbox on this article: A Complete Guide to Flexbox
*,
*::before,
*::after {
box-sizing: border-box
}
body {
margin: 0
}
.flex {
display: flex;
flex-wrap: wrap
}
.flex div {
flex: 0 50%; /*change to 1 50% to see the difference */
border: 1px solid black;
padding: 10px
}
<div class="flex">
<div>
This is an inline block element
</div>
<div>
This is an inline block element
</div>
<div>
This is a block element
</div>
</div>