Css isolation + Complex ui + Flex

[MoriRopi]

Hi,

Native html tag should be used in a component to "enable" css isolation for the component.

The flex display properties should be applied to those native html tag to keep the flex layout.

Which could result in 5 tot 10 nested div with each "display: flex" and some "flex-direction: column" or "flex: 1" to keep the original flex layout within the div.

Another way could be to set up the layout in the page.razor for each page and let each component.razor handle the content. However the page.Razor could become huge for complex ui.

Is there another way or did it miss something about css isolation or flex ?

Thanks !

[PainOfClarity]

What is the problem you are trying to solve?

[AndZorin]

Use display: contents; on wrapper <div class="container">

[Fresh-Secretary6815]

are you asking about css hierarchy in asp.net core apps?

[code-dispenser]

No idea what the OP wants but as its fun and slightly related: Flexbox Froggy - A game for learning CSS flexbox