Why does display: flex push the following element onto a new line? - html

Question

In my code, the first example works fine. The second one pushes the second element to a new line.
Why? and how to avoid it?
see this codepen
.one {
background-color: cornflowerblue;
width: 50%;
}
.one,
.two {
height: 100%;
font-size: 30px;
}
.two {
width: 50%;
background-color: salmon;
}
.ib {
display: inline-block;
}
.container {
font-size: 0;
height: 200px;
}
.fb {
display: flex;
}
<div class="container">
<div class="one ib">one</div>
<div class="two ib">two</div>
</div>
<div class="container">
<div class="one fb">one</div>
<div class="two ib">two</div>
</div>

Answer 1

You have three divs that have their display value set to inline-block. Each of these divs has a class ib.
You have one div with display: flex. This div has a class fb.
When you apply display: flex to an element it becomes a block-level container. As a block-level element, it takes up all available space in the line, pushing any subsequent elements to the next line.
The way to solve this problem is to use display: inline-flex instead of display: flex.
Revised Codepen
From the spec:
3. Flex Containers: the flex and inline-flex display
values
flex
This value causes an element to generate a block-level flex container
box.
inline-flex
This value causes an element to generate an inline-level flex
container box.

Answer 2

.fb{
display: inline-flex;
}
If you use the above code you could see the difference easily.
An inline element does not start on a new line and only takes up as much width as necessary.
But flex will start on a new line .

Answer 3

flex is actually the property you apply and enable at a container/parent level. It's not clear from your example what exactly you expect the your child divs (one and two) to do?
See this updated pen where I've removed the ib and fb classes from the children and applied fb to the second container parent: http://codepen.io/angeliquejw/pen/qZRoLz?editors=1100
Also, CSS-Tricks has a fab breakdown that helps understand the basics of flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Updated to reflect response below: flex, which you used initially,behaves more like block (see docs: https://developer.mozilla.org/en-US/docs/Web/CSS/display). You want to use display:inline-flex : http://codepen.io/angeliquejw/pen/jqyxNz?editors=1100