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

回答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>

回答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