"display:inline-block" displays differently than "display:inline flow-root"

user_15936471 0
Viewed 147

I have the following division container:

<span> Lorem. </span>
<div style="display: inline-block; background-color: yellow;">
    <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos, officia? </p>
    <p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta, ab. </p>
</div>
<span> Lorem. </span>

As expected, the division container acts like an inline-level element.

When I alter the value of the display property to "inline flow-root", the division container no longer acts like an inline-level element and instead acts like a block-level element:

<span> Lorem. </span>
<div style="display: inline flow-root; background-color: yellow;">
    <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos, officia? </p>
    <p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta, ab. </p>
</div>
<span> Lorem. </span>

According to the Mozilla Developer Network documentation, the "inline-block" value should be equivalent to "inline flow-root".

Why does the two values produce different display results?

Thanks in advance.

css
1 Answers

As per the answer given in link,

display: flow-root; Needs Chrome Canary or Firefox Nightlies.

sets it to display: table; or display: block;

May be you can use overflow: visiible to contain float-ed elements.
user_33153330
Related