2

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.

  • 1
    `display: inline flow-root` is getting disabled with warning as `invalid property value` and it is providing its default property value which is `block` – Abin Thaha Aug 08 '21 at 12:40
  • 1
    [Can I start to use the two-value syntax?](https://developer.mozilla.org/en-US/docs/Web/CSS/display/two-value_syntax_of_display#can_i_start_to_use_the_two-value_syntax) Are you running this in Firefox, the only browser that has implemented it? – Heretic Monkey Aug 08 '21 at 12:43

1 Answers1

0

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.
Abin Thaha
  • 4,493
  • 3
  • 13
  • 41