Panels don't seem to wrap correctly.

[rchiodo]

Testing #133758

This html:

      <vscode-panels>
	<vscode-panel-tab id="tab-1">PROBLEMS</vscode-panel-tab>
	<vscode-panel-tab id="tab-2">OUTPUT</vscode-panel-tab>
	<vscode-panel-tab id="tab-3">DEBUG CONSOLE</vscode-panel-tab>
	<vscode-panel-tab id="tab-4">TERMINAL</vscode-panel-tab>
	<vscode-panel-view id="view-1">
    <vscode-divider role="presentation"></vscode-divider>          
    </br>
    <vscode-checkbox disabled>Label of disabled</vscode-checkbox>
    <vscode-button id="howdy">Howdy!</vscode-button>          
    </vscode-panel-view>
	<vscode-panel-view id="view-2">
		Output Content
	</vscode-panel-view>
	<vscode-panel-view id="view-3">
		Debug Console Content
	</vscode-panel-view>
	<vscode-panel-view id="view-4">
		Terminal Content
	</vscode-panel-view>
</vscode-panels>

Creates this output

It seems like the divider and the </br> have no effect on layout.

[hawkticehurst]

Did some digging and it looks like this is caused by the fact that the panel-view component is rendered as a flexbox container and <br/> tags don't play well inside flexboxes.

If you wrapped the above code in a vanilla section or div it would work:

<vscode-panel-view id="view-1">
    <section>
        <vscode-divider role="presentation"></vscode-divider>          
        <br />
        <vscode-checkbox disabled>Label of disabled</vscode-checkbox>
        <vscode-button id="howdy">Howdy!</vscode-button>   
    </section>       
</vscode-panel-view>

However, since that really isn't a bug fix I'd love to hear some of your thoughts on what you might expect/prefer from this component @rchiodo?

I could experiment with removing the flex styling so the <br/> works or I could set the flex-direction: column so elements flow vertically instead of horizontally by default (that way you wouldn't have to use <br/> in the first place). I could also just leave everything as is and update the documentation to make people aware of this scenario.

[rchiodo]

I think updating the documentation would work for me. Nobody knows how these things are supposed to work so the examples are how everybody figures out what's 'correct'.