panthro panthro - 2 months ago 12
CSS Question

Have a flexbox next to another flexbox?

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%;
....


With no luck. 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

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>