I'm stuck trying to I'm relatively new to this, so bear with me. I'm working with an scenario with nested ` ` lists that are supposed to be styled using Flexbox. In Chrome 117, when I apply `display: flex` to a parent ` `, the nested ` ` elements lose their standard bullet points and alignment, resulting in a messy layout where items overlap each other. I've tried adding `flex-direction: column` to the nested lists, but it doesn't seem to help. Here’s a simplified version of my HTML st

HTML Nested `<ul>` Lists Rendering Incorrectly in Chrome 117 When Styled with Flexbox

👀 Views: 49 💬 Answers: 1 📅 Created: 2025-06-13

I'm stuck trying to I'm relatively new to this, so bear with me. I'm working with an scenario with nested `<ul>` lists that are supposed to be styled using Flexbox. In Chrome 117, when I apply `display: flex` to a parent `<ul>`, the nested `<ul>` elements lose their standard bullet points and alignment, resulting in a messy layout where items overlap each other. I've tried adding `flex-direction: column` to the nested lists, but it doesn't seem to help. Here’s a simplified version of my HTML structure: ```html <ul class="parent-list"> <li>Item 1</li> <li>Item 2 <ul class="nested-list"> <li>Nested Item 1</li> <li>Nested Item 2</li> </ul> </li> <li>Item 3</li> </ul> ``` And the associated CSS: ```css .parent-list { display: flex; list-style-type: none; padding: 0; } .nested-list { display: flex; flex-direction: column; list-style-type: disc; } ``` I’ve also tried setting `list-style-type: inherit` on the nested list, but the bullets remain hidden. Interestingly, this scenario does not occur in Firefox or Safari, which leads me to believe it might be a Chrome-specific rendering quirk. Has anyone encountered this scenario or have suggestions on how to restore the proper rendering of nested lists when using Flexbox in Chrome? Any help would be greatly appreciated!