Subsequent-sibling combinator / display: inline-flex doesn't work right

Question

Subsequent-sibling combinator / display: inline-flex doesn't work right

simonkrauter opened this issue 8 days ago · comments

Minimal test page:

<!DOCTYPE html>
<html>
<style>
  * {
    border: 1px solid grey;
  }

  div > :not([hidden]) ~ :not([hidden]) {
    margin-top: 20px;
  }

  span {
    display: inline-flex;
    width: 180px;
    height: 64px;
    background: yellow;
  }
</style>
</head>
<body>
<div>
  <span>1</span>
  <span>2</span>
</div>

Screenshot Ladybird:

Screenshot Chrome:

Reduction from https://ladybird.org.

Diego Frias · Answer 1 · Mon Jul 15 2024 06:41:39 GMT+0800 (China Standard Time)

I don't think this is an issue with the subsequent sibling combinator. Changing the display: inline-flex to display: inline-block fixes the rendering. Or putting border: 1px solid red on the selector that involves the subsequent sibling combinator shows that it selects the correct element.

I think it's an display: inline-flex issue.