Flexbox Doesn't Work In Summary Tag

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 fi

Solution 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>

Solution 2:

Change the styles to this classes

#wrapper {
  width: 90%;
  margin:auto;
  padding: 0 20px 0 20px;
  margin-bottom:20px;
display:flex;
flex-direction:column
}

and on summary remove clear and display:flex every thing will work as expected

check this fiddle https://codepen.io/sahithiK/pen/LRqjoR?editors=1100

Hope this helps