Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Inline-block as child of display:flex element overflows since 54 #1652

Open
Christoph-Wagner opened this issue May 30, 2022 · 1 comment
Open

Inline-block as child of display:flex element overflows since 54 #1652

Christoph-Wagner opened this issue May 30, 2022 · 1 comment
Labels
bug Existing features not working as expected

Comments

@Christoph-Wagner
Copy link

Christoph-Wagner commented May 30, 2022 •
edited
Loading

When a parent has display:flex, a child with display:inline-block gets a base-width that far overflows both the parent and the current page. This behavior was introduced in 54 and still happens with 55. 53.4 is working correctly.

Oh, in case it matters, this is all on Windows.

I made a minimal example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>empty</title>
    <style>
    .testbox {
        display: flex;
        background-color: #eee;
    }
    .testbox p {
        display: inline-block;
    }
    </style>
</head>
<body>
<div class="testbox">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
        exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
        voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
        sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
</div>
</body>
</html>

This results in

image

If I add a percentage width, it takes some other, unknown width as basis (width: 50%):

image

Changing it to display:block fixes everything:

image
@liZe liZe added the bug Existing features not working as expected label May 30, 2022
@liZe liZe mentioned this issue Jul 10, 2022
Closed
@n1ngu
Copy link

n1ngu commented Oct 27, 2022

Related issue #1563

@liZe liZe mentioned this issue Jul 26, 2024
Open
@liZe liZe mentioned this issue Jan 10, 2025
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Existing features not working as expected
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@liZe @Christoph-Wagner @n1ngu