Flexbox doesn't work in summary tag

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\

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;
}

  

  

  




  

  

  




  
Proper Usage