Summary with flexbox and pseudo element fails to show inline in Safari

user_150246 0
Viewed 976

In Safari 14 my example below shows like this

enter image description here

But if you use Chrome 87 for example it shows like this

enter image description here

I haven't found if this is a known issue? If it is, are there any suggested workarounds?

summary::-webkit-details-marker {
  display: none
}

details {
  width: 300px;
}

summary {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  outline: solid 4px #000;
  align-items: baseline;
}

summary::after {
  content: "";
}
<details>
  <summary>Hello</summary>
</details>

safari css html
1 Answers

Problem

Certain HTML elements, like <summary>, <fieldset> and <button>, do not work as flex containers. The browser's default rendering of those element's UI conflicts with the display: flex declaration.

Workaround

The simple solution to this problem is to use a wrapper element that can be a flex container (like a <span>) directly inside of the element that can't.

user_1502460
Related