html - Have a flexbox next to another flexbox? -

i have 2 flex boxes child elements. wish each of these flex boxes take 50% of page.

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

i have tried:

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

with no luck. have thought wrapping both divs in container, , displaying flex on container basis of 50%. wondering if there way without container?

to result need to:

1. use display: inline-flex on .flexbox elements
2. remove white-space html
3. use box-sizing: border-box paddings , 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>