Have a flexbox next to another flexbox?

Question

I have two flex boxes with child elements. I wish each of these flex boxes to take up 50% of the page.

<div class="flexbox">
    ....
</div>
<div class="flexbox">
    ....
</div>

I have tried:

.flexbox{
    display:flex;
    width: 50%;
    ....

I have also thought about wrapping both divs in a container, and displaying flex on the container with a basis of 50%. I was just wondering if there was a way to do it without a container?

Answer 1

To get this result you need to:

1. Use display: inline-flex on .flexbox elements
2. Remove white-space from HTML
3. Use box-sizing: border-box for paddings and borders

* {
  box-sizing: border-box;
}
body,
html {
  padding: 0;
  margin: 0;
}
.flexbox {
  border: 1px solid black;
  display: inline-flex;
  width: 50%;
}

<div class="flexbox">
    ....
</div><div class="flexbox">
    ....
</div>