Bootstrap 3 container with justify-content: space-between not working properly - css

Question

I am trying to apply flex to bootstrap 3 container and found strange behaviour of child elements Here is the code.
<div class="container">
<div class="child">One</div>
<div class="child">Two</div>
</div>
.container {
display: flex;
justify-content: space-between;
}
(see example on jsfiddle JSFiddle)
I cannot find out what's the problem with the space-between.
Thank you for the help.

Answer 1

Combining Bootstrap 3 with Flexbox is not recommended.
That said, Bootstraps container class also uses both the pseudo elements, hence they will participate in the flex container being flex items, and here one can see them when giving them a small width/height and background color.
And as you can see, the justify-content: space-between; work as it is supposed to.
.container {
display: flex;
justify-content: space-between;
}
.container::before, .container::after {
width: 30px;
height: 30px;
background: red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="child">One</div>
<div class="child">Two</div>
</div>
One workaround would be a wrapper
.container .flex {
display: flex;
justify-content: space-between;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="flex">
<div class="child">One</div>
<div class="child">Two</div>
</div>
</div>

Answer 2

I think the issue is that you're using a classname from bootstrap .container you're attempting to change the style. Just use a id instead of the classname container.
#main {
display: flex;
justify-content: space-between;
}
<div id="main">
<div class="child">One</div>
<div class="child">Two</div>
</div>