> Markdown version of [Vertical Layout](https://vaadin.com/docs/v24/components/vertical-layout). Section index: [llms.txt](https://vaadin.com/docs/v24/components/llms.txt)

# Vertical Layout

Vertical Layout places components top-to-bottom in a column. By default, it has a width of 100% and an undefined height. Its width is constrained by its parent component (i.e., it “fills” the available space). Whereas, its height is determined by the components it contains (i.e., it “hugs” its content).

See [Horizontal Layout](https://vaadin.com/docs/v24/components/horizontal-layout.md) for information on placing components side-by-side.

**Lit** — `vertical-layout-basic.ts`

```typescript
<vaadin-vertical-layout theme="spacing padding">
  <div class="example-item">Item 1</div>
  <div class="example-item">Item 2</div>
  <div class="example-item">Item 3</div>
</vaadin-vertical-layout>
```

**Flow** — `VerticalLayoutBasic.java`

```java
VerticalLayout layout = new VerticalLayout();

Div item1 = new Div("Item 1");
item1.setClassName("example-item");

Div item2 = new Div("Item 2");
item2.setClassName("example-item");

Div item3 = new Div("Item 3");
item3.setClassName("example-item");

layout.add(item1, item2, item3);
```

**React** — `vertical-layout-basic.tsx`

```tsx
<VerticalLayout theme="spacing padding">
  <div className="example-item">Item 1</div>
  <div className="example-item">Item 2</div>
  <div className="example-item">Item 3</div>
</VerticalLayout>
```

Components in a Vertical Layout can be aligned vertically, as you’d expect. However and perhaps surprisingly, they can also be aligned horizontally in a Vertical Layout.

## <a id="vertical-alignment"></a>Vertical Alignment

You can position components at the top, middle, or bottom. You can also position them by specifying how the excess space in a layout is distributed among them.

**Lit** — `vertical-layout-vertical-alignment.ts`

```typescript
<vaadin-vertical-layout
  theme="spacing padding"
  class="height-4xl"
  style="justify-content: center"
>
  <div class="example-item">Item 1</div>
  <div class="example-item">Item 2</div>
  <div class="example-item">Item 3</div>
</vaadin-vertical-layout>
```

**Flow** — `VerticalLayoutVerticalAlignment.java`

```java
VerticalLayout layout = new VerticalLayout();
layout.setJustifyContentMode(FlexComponent.JustifyContentMode.CENTER);

Div item1 = new Div("Item 1");
item1.setClassName("example-item");

Div item2 = new Div("Item 2");
item2.setClassName("example-item");

Div item3 = new Div("Item 3");
item3.setClassName("example-item");

layout.add(item1, item2, item3);
```

**React** — `vertical-layout-vertical-alignment.tsx`

```tsx
<VerticalLayout
  theme="spacing padding"
  className="height-4xl"
  style={{ justifyContent: 'center' }}
>
  <div className="example-item">Item 1</div>
  <div className="example-item">Item 2</div>
  <div className="example-item">Item 3</div>
</VerticalLayout>
```

| Value             | Description                                                                                                                                    |
| ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| `START` (default) | Positions items at the top.                                                                                                                    |
| `CENTER`          | Centers items, vertically.                                                                                                                     |
| `END`             | Positions items at the bottom.                                                                                                                 |
| `BETWEEN`         | Available space is distributed equally among items. However, no space is added before the first item, or after the last.                       |
| `AROUND`          | Available space is distributed equally among items. However, the space before the first item and after the last is half of that between items. |
| `EVENLY`          | Available space is distributed equally among items. The space before the first item and after the last item is the same as between others.     |

## <a id="horizontal-alignment"></a>Horizontal Alignment

Components in a Vertical Layout are left-aligned by default, but can be centered, right-aligned or stretched horizontally.

**Lit** — `vertical-layout-horizontal-alignment.ts`

```typescript
<vaadin-vertical-layout theme="spacing padding" style="align-items: center">
  <div class="example-item">Item 1</div>
  <div class="example-item">Item 2</div>
  <div class="example-item">Item 3</div>
</vaadin-vertical-layout>
```

**Flow** — `VerticalLayoutHorizontalAlignment.java`

```java
VerticalLayout layout = new VerticalLayout();
layout.setAlignItems(FlexComponent.Alignment.CENTER);

Div item1 = new Div("Item 1");
item1.setClassName("example-item");

Div item2 = new Div("Item 2");
item2.setClassName("example-item");

Div item3 = new Div("Item 3");
item3.setClassName("example-item");

layout.add(item1, item2, item3);
```

**React** — `vertical-layout-horizontal-alignment.tsx`

```tsx
<VerticalLayout theme="spacing padding" style={{ alignItems: 'center' }}>
  <div className="example-item">Item 1</div>
  <div className="example-item">Item 2</div>
  <div className="example-item">Item 3</div>
</VerticalLayout>
```

| Value             | Description                                                                                                                                   |
| ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
| `START` (default) | Left-aligns items for left-to-right language text (e.g., English). For right-to-left languages (e.g., Arabic, Hebrew), it right-aligns items. |
| `CENTER`          | Centers items, horizontally.                                                                                                                  |
| `END`             | Right-aligns for left-to-right language text. For right-to-left languages, it left-aligns items.                                              |
| `STRETCH`         | Stretches horizontally items with undefined width.                                                                                            |

It’s also possible to align horizontally individual components by overriding the general alignment setting of the layout.

**Lit** — `vertical-layout-individual-alignment.ts`

```typescript
<vaadin-vertical-layout theme="spacing padding" style="align-items: start">
  <div class="example-item" style="align-self: end">Item 1</div>
  <div class="example-item" style="align-self: center">Item 2</div>
  <div class="example-item">Item 3</div>
</vaadin-vertical-layout>
```

**Flow** — `VerticalLayoutIndividualAlignment.java`

```java
VerticalLayout layout = new VerticalLayout();
layout.setAlignItems(FlexComponent.Alignment.START);

Div item1 = new Div("Item 1");
item1.setClassName("example-item");
layout.add(item1);
layout.setAlignSelf(Alignment.END, item1);

Div item2 = new Div("Item 2");
item2.setClassName("example-item");
layout.add(item2);
layout.setAlignSelf(Alignment.CENTER, item2);

Div item3 = new Div("Item 3");
item3.setClassName("example-item");
layout.add(item3);
```

**React** — `vertical-layout-individual-alignment.tsx`

```tsx
<VerticalLayout theme="spacing padding" style={{ alignItems: 'start' }}>
  <div className="example-item" style={{ alignSelf: 'end' }}>
    Item 1
  </div>
  <div className="example-item" style={{ alignSelf: 'center' }}>
    Item 2
  </div>
  <div className="example-item">Item 3</div>
</VerticalLayout>
```

## <a id="spacing"></a>Spacing

Spacing is used to create space between components in the same layout. Spacing can help prevent misclicks and distinguish content areas.

**Lit** — `vertical-layout-spacing.ts`

```html
<vaadin-vertical-layout theme="spacing padding" style="align-items: stretch">
</vaadin-vertical-layout>
```

**Flow** — `VerticalLayoutSpacing.java`

```java
// VerticalLayout has spacing enabled by default, use setSpacing to
// disable it
VerticalLayout layoutWithoutSpacing = new VerticalLayout();
layoutWithoutSpacing.setSpacing(false);
```

**React** — `vertical-layout-spacing.tsx`

```tsx
<VerticalLayout theme="spacing padding" style={{ alignItems: 'stretch' }}>
</VerticalLayout>
```

Five different spacing theme variants are available:

**Lit** — `vertical-layout-spacing-variants.ts`

```typescript
@state()
private themeVariant = 'spacing-xl';

protected override render() {
  return html`
    <vaadin-vertical-layout
      theme="${this.themeVariant} padding"
      class="height-4xl"
      style="align-items: stretch"
    >
      <div class="example-item">Item 1</div>
      <div class="example-item">Item 2</div>
      <div class="example-item">Item 3</div>
    </vaadin-vertical-layout>
    <vaadin-radio-group
      label="Spacing variant"
      .value="${this.themeVariant}"
      @value-changed="${(event: RadioGroupValueChangedEvent) => {
        this.themeVariant = event.detail.value;
      }}"
    >
      <vaadin-radio-button value="spacing-xs" label="spacing-xs"></vaadin-radio-button>
      <vaadin-radio-button value="spacing-s" label="spacing-s"></vaadin-radio-button>
      <vaadin-radio-button value="spacing" label="spacing"></vaadin-radio-button>
      <vaadin-radio-button value="spacing-l" label="spacing-l"></vaadin-radio-button>
      <vaadin-radio-button value="spacing-xl" label="spacing-xl"></vaadin-radio-button>
    </vaadin-radio-group>
  `;
}
```

| Theme Variant | Usage Recommendation             |
| ------------- | -------------------------------- |
| `spacing-xs`  | Extra-small space between items. |
| `spacing-s`   | Small space between items.       |
| `spacing`     | Medium space between items.      |
| `spacing-l`   | Large space between items.       |
| `spacing-xl`  | Extra-large space between items. |

**Lit**

```html
<vaadin-vertical-layout
  theme="spacing-xs padding">
</vaadin-vertical-layout>
```

**Flow**

```java
VerticalLayout layout = new VerticalLayout();
layout.setSpacing(false);
layout.getThemeList().add("spacing-xs");
```

**React**

```tsx
<VerticalLayout theme="spacing-xs padding">
</VerticalLayout>
```

Alternatively, the spacing can be set to a custom value: (since V24.7)

**Lit**

```html
<vaadin-vertical-layout style="gap: 12px">
</vaadin-vertical-layout>
```

**Flow**

```java
VerticalLayout layout = new VerticalLayout();
layout.setSpacing(12, Unit.PIXELS);
```

**React**

```tsx
<VerticalLayout style={{ gap: '12px' }}>
</VerticalLayout>
```

## <a id="padding"></a>Padding

Padding is the space allocated between the content in a layout and the outer border. This should not be confused with Margin, which is explained in the next section.

Padding can help distinguish the content in a layout from its surrounding. Padding is applied using the padding theme variant.

**Lit** — `vertical-layout-padding.ts`

```html
<vaadin-vertical-layout theme="padding spacing" style="align-items: stretch">
</vaadin-vertical-layout>
```

**Flow** — `VerticalLayoutPadding.java`

```java
// VerticalLayout has padding enabled by default, use setPadding to
// disable it
VerticalLayout layoutWithoutPadding = new VerticalLayout();
layoutWithoutPadding.setPadding(false);
```

**React** — `vertical-layout-padding.tsx`

```tsx
<VerticalLayout theme="padding spacing" style={{ alignItems: 'stretch' }}>
</VerticalLayout>
```

## <a id="margin"></a>Margin

Margin is the space around a layout. This is different from Padding, which is explained in the previous section.

**Lit** — `vertical-layout-margin.ts`

```html
<vaadin-vertical-layout theme="margin spacing padding" style="align-items: stretch">
</vaadin-vertical-layout>
```

**Flow** — `VerticalLayoutMargin.java`

```java
VerticalLayout layoutWithMargin = new VerticalLayout();
layoutWithMargin.setMargin(true);
```

**React** — `vertical-layout-margin.tsx`

```tsx
<VerticalLayout theme="margin spacing padding" style={{ alignItems: 'stretch' }}>
</VerticalLayout>
```

## <a id="wrapping"></a>Wrapping (since V24.6)

By default, components in a layout either shrink or overflow when there isn’t enough vertical space. Enable wrapping to allow components to flow onto a new column when space runs out, preventing overflow.

**Lit** — `vertical-layout-wrapping.ts`

```html
<vaadin-vertical-layout
  theme="wrap spacing padding"
  style="align-items: stretch; height: 200px;"
>
</vaadin-vertical-layout>
```

**Flow** — `VerticalLayoutWrapping.java`

```java
VerticalLayout layoutWithWrap = new VerticalLayout();
layoutWithWrap.setWrap(true);
```

**React** — `vertical-layout-wrapping.tsx`

```tsx
<VerticalLayout
  theme="wrap spacing padding"
  style={{ alignItems: 'stretch', height: '200px' }}
>
</VerticalLayout>
```

## <a id="troubleshooting"></a>Troubleshooting

### <a id="component-is-smaller-than-its-specified-size"></a>Component is Smaller than its Specified Size

In some situations, a component with a specific, fixed size is rendered smaller than that size (and its size may vary depending on the size of the UI).

This is usually caused by the component being placed in the same Horizontal or Vertical Layout as another component with 100% (or “full”) size along the same axis.

The reason for this behavior is a combination of two aspects of Horizontal Layout and Vertical Layout:

- 100% width or height actually means the full width or height of the layout, rather than whatever space is available after any fixed-size items.

- By default, children of these layouts are allowed to shrink below their specified size. While this allows full-size items to shrink below 100% to make room for other items, it also makes fixed-size items shrink a bit.

There are three main ways to solve this issue:

#### <a id="prevent-the-fixed-size-element-from-shrinking"></a>Prevent the fixed-size element from shrinking

By setting the flex-shrink value of the fixed size component to 0, it is prevented from shrinking below that size.

**Lit**

```html
<vaadin-vertical-layout>
  <div style="height: 200px; flex-shrink: 0;"></div>
  <div style="height: 100%;"></div>
</vaadin-vertical-layout>
```

**Flow**

```java
VerticalLayout layout = new VerticalLayout(fixedSizeComponent, fullSizeComponent);
fixedSizeComponent.setHeight("200px");
fullSizeComponent.setHeightFull();

layout.setFlexShrink(fixedSizeComponent, 0);
// or
fixedSizeComponent.getStyle().setFlexShrink("0");
```

**React**

```tsx
<VerticalLayout>
  <div style={{ height: '200px', flexShrink: 0 }}></div>
  <div style={{ height: '100%' }}></div>
</VerticalLayout>
```

#### <a id="use-flex-grow-instead-of-100-size"></a>Use Flex-Grow Instead of 100% Size

Instead of setting a 100% (or “full”) size, you can make a component take all available space by setting its flex-grow value to 1.

**Lit**

```html
<vaadin-vertical-layout>
  <div style="height: 200px;"></div>
  <div style="flex-grow: 1;"></div>
</vaadin-vertical-layout>
```

**Flow**

```java
VerticalLayout layout = new VerticalLayout(fixedSizeComponent, fullSizeComponent);
fixedSizeComponent.setHeight("200px");

layout.setFlexGrow(fullSizeComponent, 1);
// or
fullSizeComponent.getStyle().setFlexGrow("1");
```

**React**

```tsx
<VerticalLayout>
  <div style={{ height: '200px' }}></div>
  <div style={{ flexGrow: 1 }}></div>
</VerticalLayout>
```

#### <a id="enable-layout-improvements-flow-only-experimental"></a>Enable Layout Improvements (Flow only, experimental) (since V24.7)

By enabling the `layoutComponentImprovements` [feature flag](https://vaadin.com/docs/v24/flow/configuration/feature-flags.md), the Flow APIs `setWidthFull`, `setHeightFull` and `setSizeFull` are rewired to automatically apply `flex:1` to the component. This prevents fixed-size components from shrinking and makes the full-size component take up the remaining space in the layout.

### <a id="component-overflows-its-specified-size"></a>Component Overflows its Specified Size

This is most commonly noticed on scroll containers like [Scroller](https://vaadin.com/docs/v24/components/scroller.md) and [TabSheet](https://vaadin.com/docs/v24/components/tabs.md), or elements that have been scroll-enabled through CSS, but it can occur in other situations as well. The problem often causes extra undesired scrollbars to appear.

This is caused by the default minimum size of a layout item to be equal to the size of its contents.

There are three main ways to solve this issue:

#### <a id="set-an-appropriate-minimum-size"></a>Set an Appropriate Minimum Size

Set the minimum size to 0 or any other specific size.

**Lit**

```html
<div style="min-height: 0"></div>
```

**Flow**

```java
overFlowingComponent.setMinHeight("0");
```

**React**

```tsx
<div style={{ minHeight: '0' }}></div>
```

#### <a id="prevent-overflow"></a>Prevent Overflow

You can prevent the component from overflowing by setting the CSS overflow property to hidden. Be aware that this will also clip outlines and box-shadows, such as those used for focus rings.

**Lit**

```html
<div style="overflow: hidden"></div>
```

**Flow**

```java
overFlowingComponent.getStyle().setOverflow(Overflow.HIDDEN);
```

**React**

```tsx
<div style={{ overflow: 'hidden' }}></div>
```

#### <a id="enable-layout-improvements-flow-only-experimental-2"></a>Enable Layout Improvements (Flow only, experimental) (since V24.7)

By enabling the `layoutComponentImprovements` [feature flag](https://vaadin.com/docs/v24/flow/configuration/feature-flags.md), the Flow APIs `setWidthFull`, `setHeightFull` and `setSizeFull` are rewired to also set the minimum size of nested Horizontal and Vertical Layouts to 0, allowing them to shrink below the size of their contents.

`73cc0e40-d39a-11ed-afa1-0242ac120002`