title: "display:inline-block" displays differently than "display:inline flow-root"
body: <p>I have the following division container:</p>
  <pre><code>&lt;span&gt; Lorem. &lt;/span&gt;
  &lt;div style=&quot;display: inline-block; background-color: yellow;&quot;&gt;
      &lt;p&gt; Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos, officia? &lt;/p&gt;
      &lt;p&gt; Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta, ab. &lt;/p&gt;
  &lt;/div&gt;
  &lt;span&gt; Lorem. &lt;/span&gt;
  </code></pre>
  <p>As expected, the division container acts like an inline-level element.</p>
  <p>When I alter the value of the display property to &quot;inline flow-root&quot;, the division container no longer acts like an inline-level element and instead acts like a block-level element:</p>
  <pre><code>&lt;span&gt; Lorem. &lt;/span&gt;
  &lt;div style=&quot;display: inline flow-root; background-color: yellow;&quot;&gt;
      &lt;p&gt; Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos, officia? &lt;/p&gt;
      &lt;p&gt; Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta, ab. &lt;/p&gt;
  &lt;/div&gt;
  &lt;span&gt; Lorem. &lt;/span&gt;
  </code></pre>
  <p>According to the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display#legacy" rel="nofollow noreferrer">Mozilla Developer Network documentation</a>, the &quot;inline-block&quot; value should be equivalent to &quot;inline flow-root&quot;.</p>
  <p>Why does the two values produce different display results?</p>
  <p>Thanks in advance.</p>