` elements in the examples, although you can use any other elements as well. For instance, in order to have a nested vertical split layout inside a horizontal one, you can include `` as a content element inside another split layout: ```html

First content element

Second content element

Third content element

``` You can also trigger the vertical mode in JavaScript by setting the property: `splitLayout.orientation = "vertical";`. ### Split Layout Element Height `` element itself is a flex container. It does not inherit the parent height by default, but rather sets its height depending on the content. You can use CSS to set the fixed height for the split layout, as usual with any block element: ```html

First content element

Second content element

``` It is possible to define percentage height as well. Note that you have to set the parent height in order to make percentages work correctly. In the following example, the `` is resized to fill the entire viewport, and the `` element is set to take 100% height of the ``: ```html

First

Second

``` Alternatively, you can use a flexbox layout to make `` fill up the parent: ```html

First

Second

``` ### Initial Splitter Position The initial splitter position is determined from the sizes of the content elements inside the split layout. Therefore, changing `width` on the content elements affects the initial splitter position for the horizontal layouts, while `height` affects the vertical ones. Note that when the total size of the content elements does not fit the layout, the content elements are scaled proportionally. When setting initial sizes with relative units, such as percentages, it is recommended to assign the size for both content elements: ```html

Three fourths

One fourth

``` ### Size Limits The `min-width`/`min-height`, and `max-width`/`max-height` CSS size values for the content elements are respected and used to limit the splitter position when it is dragged. It is preferred to set the limits only for a single content element, in order to avoid size conflicts: ```html

First

Second

``` ### Styling The following shadow DOM parts are available for styling: Part name | Description -----------|-------------- `splitter` | Split element `handle` | The handle of the splitter The following custom CSS properties are available for styling: Custom CSS property | :----------------------------------------------| | `--vaadin-split-layout-handle-size` | | `--vaadin-split-layout-handle-target-size` | | `--vaadin-split-layout-splitter-background` | | `--vaadin-split-layout-splitter-size` | | `--vaadin-split-layout-splitter-target-size` | See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation. ## Properties ### orientation **Type:** `"horizontal" | "vertical"` The split layout's orientation. Possible values are: `horizontal|vertical`. ## Events ### splitter-dragend **Type:** `CustomEvent` Fired after dragging the splitter have ended.