Display:inline-block and display:flex at the same time

Question

Is there a way for a <div> tag to hold the properties display: inline-block; and display: flex;at the same time ?

I would like to have the rule display: inline-block; for the position of the division itself and the rule display: flex; to organize the childs of this tag.

In the following hierarchy, I would like to append the two rules for the divisions with the class "child", but I could not find a way to achieve it :

<div class="parent">
  <div class="child">
     <subchild1>
     <subchild2>
     ...
  </div>
  <div class="child">
     <subchild1>
     <subchild2>
     ...
  </div>
  ...
</div>

<style type="text/css">
.child {
   display: inline-block;
   display: flex;
}
</style>

Thank you in advance,

Answer 1

Use display: inline-flex instead.

Like so:

<style>
.child {
   display: inline-flex;
}
</style>

It makes the flex container display inline, but preserves the flex layout of it's children.