Andrey (azangru) wrote,

CSS surprized me today.

Make a container and put some text in it:

then add a negative margin to the heading, so that it become outdented:

no surprises so far:

Now add an overflow-y: auto to the container so that its content could scroll down. The moment you do this, the hanging part of the heading gets cropped by the border of the container:

Overflow-x: visible doesn't help. There must be a spec somewhere that explains why this is the correct behavior; i.e. why overflow-x starts behaving as if it were set to hidden; but it's so unintuitive it's bewildering.

(example in jsfiddle)

Of course the desired effect can still be achieved through a combination of padding and negative margin, but still — yikes!

  • (no subject)

    Results of a survey. No idea who those guys are or how reliable their data, but I've been wondering for a while now what people mean when they say…

  • (no subject)

    I'm listening to The Ickabog, by J.K. Rowling and read, with much gusto, by Stephen Fry. What started like a nice children's tale not dissimilar from…

  • (no subject)

    From today's questions to the Prime Minister: Mr Speaker, today, millions of Uyghur people in China live in fear under a cruel regime. The BBC,…

  • Post a new comment


    default userpic
    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.