Overflowing Panes

An example of how panes with overflowing content are handled.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fuga quaerat eos, saepe doloribus facere fugiat! Magni consequatur a veniam quia. Exercitationem recusandae facilis cupiditate repellendus quaerat tenetur minima veniam quia! Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi totam voluptates eveniet vel ab velit quas repudiandae quae possimus ad, eligendi commodi perspiciatis nisi tempora vitae ratione non! Praesentium, aliquam? Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia fuga harum odit doloribus ea. Atque expedita repudiandae, provident suscipit dignissimos cupiditate itaque beatae debitis autem animi qui, quas aspernatur impedit!

View Example Code

Anatomy

Here's the high-level structure of the example above:

		<script lang="ts">
	import { PaneGroup, Pane, PaneResizer } from "paneforge";
</script>
 
<PaneGroup direction="horizontal">
	<Pane defaultSize={50}>
		<div class="overflow-auto">
			<!-- ... content here-->
		</div>
	</Pane>
	<PaneResizer />
	<Pane defaultSize={50}>
		<PaneGroup direction="vertical">
			<Pane defaultSize={25}>
				<div class="overflow-auto">
					<!-- ... content here-->
				</div>
			</Pane>
			<PaneResizer />
			<Pane defaultSize={75}>
				<div class="overflow-auto">
					<!-- ... content here-->
				</div>
			</Pane>
		</PaneGroup>
	</Pane>
</PaneGroup>