Skip to content

[css-grid] <pre> blocks are breaking grid layout #1589

Closed
@samdbeckham

Description

@samdbeckham

URL: https://codepen.io/samdbeckham/pen/LLevOP?editors=0100
Browser / Version: Chrome 59.0.3071
Operating System: Mac OS X 10.11.6
Problem type: Layout is breaking

Steps to Reproduce:

  1. Navigate to: https://codepen.io/samdbeckham/pen/LLevOP?editors=0100
  2. Have a read, I've isolated and outlined the issue.
  3. Play about with the CSS in the editor on the right

Expected Behavior:

The bottom example should behave like the top example (in regards to the <pre> block)

Actual Behavior:

It breaks out of it's container and messes up the grid.

Whilst I noticed this in Chrome, it appears to be happening in Safari, and Firefox as well. I don;t have a testing setup for Edge but I'd wager it's happening there too.

This is crossposted from the webcompat github

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions