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

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.

Solution

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>

Comments

[Aakash Thakur]

What do you want to achieve?

[Monkey_Dev1400]

what browser are you using and what's the problem?

[arjun]

To understand as a beginner about flex - medium.freecodecamp.org/…

[Arsenii Derkach]

@AakashThakur I found this bug and tried to understand the strange behaviour of flex here

[Arsenii Derkach]

@Monkey_Dev1400 I found this problem in chrome and FF, so I was pretty sure that it is not about browsers

[Arsenii Derkach]

@arjun I've already know all of this stuff, but if you will look at the justify-content and all different variants, you will find that the behaviour I wrote is different from the standard flex behaviour.

[Arsenii Derkach]

Thank you, now I'm finally understand what's the problem with it! I know that it is better to avoid combining bootstrap and flex, but I found this strange behaviour and tried to understand this feature.