Can't scroll to the bottom of an absolute element in Chrome

Question

I can't scroll to the bottom of an absolutely positioned element inside an inline element in Chrome as soon as I add some div over it. It works fine in Firefox...

Here a minimalist code reproducing the problem:

<div>When you</div>
<div>remove</div>
<div>these divs</div>
<div>it works</div>
<div>fine in Chrome</div>
<div style="display:inline;position:relative;background:green;">
    <div style="position:absolute;background:red;">111
      <br>222
      <br>333
      <br>444
      <br>555
      <br>666
      <br>777
      <br>888
  </div>
</div>

Here is the Fiddle:

https://jsfiddle.net/p973qaty/9/

You can just add a height to the `div` see fiddle https://jsfiddle.net/p973qaty/10/ — Adam Buchanan Smith, May 25 '16 at 21:24
Or change to `inline-block` https://jsfiddle.net/p973qaty/11/ — Adam Buchanan Smith, May 25 '16 at 21:25
And this answer helps explain your isse http://stackoverflow.com/questions/8969381/what-is-the-difference-between-display-inline-and-display-inline-block — Adam Buchanan Smith, May 25 '16 at 21:27
I can't make it inline-block and I can't set the height because the content of the box dynamic. — Pierre, May 25 '16 at 21:30
I very well understand the difference between inline and inline-block but the fact is that Chrome and Firefox behave differently... — Pierre, May 25 '16 at 21:31
I am surprised Firefox lets you, seems more of a Firefox bug and not an issue with Chrome. — Adam Buchanan Smith, May 25 '16 at 21:34

Babken · Answer 1 · 2016-05-25T22:57:05.580

It is very interesting... I found in w3.org specification that overflow applies to block containers, flex containers and grid containers, but in developer.mozilla.org is written that it applies to block-level elements and inline-block elements. And in the example that we have in Firefox it applies in inline elements also and in tests we can see that in Chrome it applies in inline-block elements.
Links to specs w3.org and developer.mozilla.org

Can't scroll to the bottom of an absolute element in Chrome

1 Answers1