Andrey (azangru) wrote,
Andrey
azangru

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!
Subscribe

  • (no subject)

    Someone's comment on Twitter reminded me how differently we interpret what we experience: My impression from that interview was that Yuri was…

  • (no subject)

    Via Twitter. From the book The Gray Lady Winked, photographed by Michael Shermer: Here's the tweet that the paragraph references (took a while…

  • (no subject)

    To unscramble an egg, by the way, would be a closer idiomatic parallel to ungrinding ground meat, and in spite of Julia Ioffe, is just as dark, blunt…

  • Post a new comment

    Error

    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.
  • 0 comments