On the flex-grow page, the result section of the last example is showing wrong

[duandzgp]

MDN URL

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow

What specific section or headline is this issue about?

Result (#result)

What information was incorrect, unhelpful, or incomplete?

The #content should be applied display: flex property, but it is not. Because there are some broken styles before its style block

/* These styles below are broken */
background-color:red;
background-color:lightblue;
background-color:yellow;
background-color:brown;
background-color:lightgreen;
background-color:brown;
#content {
  display: flex;

  justify-content: space-around;
  flex-flow: row wrap;
  align-items: stretch;
}

What did you expect to see?

The #content should be applied display: flex property.

Btw, I think we should use class instead of id for the content element. Because using the ID is an anti-pattern. It's fine in the example but folks likely use the example as the standard. I remember in the early stage of my career, I usually considered code from MDN and some other sites as good practice and followed blindly.

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

I would like to fix this issue but I can't find where is the snippet code.

MDN metadata

Page report details

• Folder: en-us/web/css/flex-grow
• MDN URL: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/css/flex-grow/index.md
• Last commit: mdn/content@f421d51
• Document last modified: 2023-03-24T06:41:28.000Z

[Josh-Cena]

Those styles are inline styles and shouldn't be extracted as CSS. cc @mdn/core-dev is this a Yari problem?

[LeoMcA]

is this a Yari problem?

Yep looks like it, I've transferred the issue. We'll hopefully be able to fix early next week.