display: flex; does not work with <summary> on Safari [duplicate]

Question

I have this pen where the layout is floated, but when I try to flexbox one container below the layout, the flexbox doesn't work. I know it is caused by the floats however, can't find a way to fix it. Tried to use clearfix but it doesnt work.

The items that i'm trying to flex is in summary tag.

---

Code Snippet:

summary {
  clear: both;
  padding: 20px;
  background: white;
  display: flex;
}
summary p {
  width: 33%;
  display: inline-block;
  background: pink;
  margin: 0px;
  padding-right: 20px;
}

<summary class="clearfix">
  <p>Integer eget mauris et urna pulvinar consectetur hendrerit eget mauris. Praesent a interdum justo. Aenean ac diam nec neque fringilla cursus. Donec iaculis tortor in nunc vehicula rutrum. Integer malesuada mollis ligula at varius.</p>
  <p>Integer eget mauris et urna pulvinar consectetur hendrerit eget mauris. Praesent a interdum justo. Aenean ac diam nec neque fringilla cursus. Donec iaculis tortor in nunc vehicula rutrum. Integer malesuada mollis ligula at varius.</p>
  <p>Integer eget mauris et urna pulvinar consectetur hendrerit eget mauris. Praesent a interdum justo. Aenean ac diam nec neque fringilla cursus. Donec iaculis tortor in nunc vehicula rutrum. Integer malesuada mollis ligula at varius.</p>
</summary>

---

CodePen

Answer 1

The problem is that you are using flexbox in a summary tag, which is not a structural one. summary is used inside a details element. Consider using a proper semantic tag like article or section for this, and it will work.

---

Code Snippet:

summary,
article {
  display: flex;
}
p::before {
  content: "Paragraph.";
}
details > summary {
  display: block;
}

<summary>
  <p></p>
  <p></p>
  <p></p>
</summary>

<article>
  <p></p>
  <p></p>
  <p></p>
</article>

<details>
  <summary>Proper Usage</summary>
  <p></p>
</details>