--- title: Scroll box description: >- The scroll box component creates a scrollable area for content that exceeds container bounds. Use it to display large amounts of content within constrained spaces while maintaining usability. The component creates a defined scrollable area with customizable dimensions and scroll behavior. api_version: 2025-10 api_name: pos-ui-extensions source_url: html: >- https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/layout-and-structure/scroll-box md: >- https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/layout-and-structure/scroll-box.md --- # Scroll box The scroll box component creates a scrollable area for content that exceeds container bounds. Use it to display large amounts of content within constrained spaces while maintaining usability. The component creates a defined scrollable area with customizable dimensions and scroll behavior. ### Support Targets (9) ### Supported targets * [pos.​cart.​line-item-details.​action.​render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/cart-details#cart-details-action-modal-) * [pos.​customer-details.​action.​render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/customer-details#customer-details-action-modal-) * [pos.​draft-order-details.​action.​render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/draft-order-details#draft-order-details-action-modal-) * [pos.​exchange.​post.​action.​render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/post-exchange#post-exchange-action-modal-) * [pos.​home.​modal.​render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/home-screen#home-screen-action-modal-) * [pos.​order-details.​action.​render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/order-details#order-details-action-modal-) * [pos.​product-details.​action.​render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/product-details#product-details-action-modal-) * [pos.​purchase.​post.​action.​render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/post-purchase#post-purchase-action-modal-) * [pos.​return.​post.​action.​render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/post-return#post-return-action-modal-) #### Use cases * **Long lists:** Display lists of items or data that exceed available screen space. * **Constrained layouts:** Create scrollable areas within modals where fixed dimensions are required. * **Dynamic content:** Handle content that varies in length, like product lists or search results. * **Overflow handling:** Contain overflow content without disrupting the overall page layout. ## Examples ### Create a scrollable content area Create scrollable content areas using a scroll box component for content that exceeds container bounds. This example shows a basic scrollable area with customizable dimensions. ## Create a scrollable content area ![](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/pos-ui-extensions/2025-10/scrollbox-default-Mw9pDTuZ.png) ### Examples * #### Create a scrollable content area ##### Description Create scrollable content areas using a scroll box component for content that exceeds container bounds. This example shows a basic scrollable area with customizable dimensions. ##### Default ```html True Twin board Directional board Volume shifted board Asymmetrical board ``` ## Properties Configure the following properties on the scroll box component. * **blockSize** **SizeUnitsOrAuto** **Default: 'auto'** The block size of the scrollable container. Auto automatically sizes based on the container's content and available space. * **id** **string** A unique identifier for the element used for targeting with CSS, JavaScript, or accessibility features. * **inlineSize** **SizeUnitsOrAuto** **Default: 'auto'** The inline size of the scrollable container. Auto automatically sizes based on the container's content and available space. * **maxBlockSize** **SizeUnitsOrNone** **Default: 'none'** The maximum block size constraint for the scrollable container. * **maxInlineSize** **SizeUnitsOrNone** **Default: 'none'** The maximum inline size constraint for the scrollable container. * **minBlockSize** **SizeUnits** **Default: '0'** The minimum block size constraint for the scrollable container. * **minInlineSize** **SizeUnits** **Default: '0'** The minimum inline size constraint for the scrollable container. * **padding** **MaybeAllValuesShorthandProperty\** **Default: 'none'** The padding applied to all edges of the scrollable container. Supports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties#edges_of_a_box) using flow-relative values in the order: * 4 values: `block-start inline-end block-end inline-start` * 3 values: `block-start inline block-end` * 2 values: `block inline` For example: * `large` means block-start, inline-end, block-end and inline-start paddings are `large`. * `large none` means block-start and block-end paddings are `large`, inline-start and inline-end paddings are `none`. * `large none large` means block-start padding is `large`, inline-end padding is `none`, block-end padding is `large` and inline-start padding is `none`. * `large none large small` means block-start padding is `large`, inline-end padding is `none`, block-end padding is `large` and inline-start padding is `small`. An `auto` value inherits the default padding from the closest container that has removed its usual padding. * **paddingBlock** **'' | MaybeTwoValuesShorthandProperty\** **Default: '' - meaning no override** The block-axis padding for the scrollable container. Overrides the block value of the `padding` property. * **paddingBlockEnd** **'' | PaddingKeyword** **Default: '' - meaning no override** The block-end padding for the scrollable container. Overrides the block-end value of the `paddingBlock` property. * **paddingBlockStart** **'' | PaddingKeyword** **Default: '' - meaning no override** The block-start padding for the scrollable container. Overrides the block-start value of the `paddingBlock` property. * **paddingInline** **'' | MaybeTwoValuesShorthandProperty\** **Default: '' - meaning no override** The inline-axis padding for the scrollable container. Supports two-value syntax where `large none` sets inline-start to `large` and inline-end to `none`. Overrides the inline value of the `padding` property. * **paddingInlineEnd** **'' | PaddingKeyword** **Default: '' - meaning no override** The inline-end padding for the scrollable container. Overrides the inline-end value of the `paddingInline` property. * **paddingInlineStart** **'' | PaddingKeyword** **Default: '' - meaning no override** The inline-start padding for the scrollable container. Overrides the inline-start value of the `paddingInline` property. ### SizeUnitsOrAuto Defines size values that can be specified as exact measurements or automatic sizing. Supports pixel values, percentages, zero, or automatic sizing based on content. ```ts SizeUnits | 'auto' ``` ### SizeUnits Defines exact size measurements without automatic or unconstrained options. Limited to specific pixel values, percentages, or zero. ```ts `${number}px` | `${number}%` | `0` ``` ### SizeUnitsOrNone Defines size values that can be specified as exact measurements or no constraint. Supports pixel values, percentages, zero, or no maximum limit. ```ts SizeUnits | 'none' ``` ### MaybeAllValuesShorthandProperty A utility type for properties that support \[1-to-4-value shorthand syntax]\(https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Cascade/Shorthand\_properties#edges\_of\_a\_box). ```ts T | `${T} ${T}` | `${T} ${T} ${T}` | `${T} ${T} ${T} ${T}` ``` ### PaddingKeyword Defines the available padding size options using a semantic scale. Provides consistent spacing values that align with the POS design system. ```ts SizeKeyword | 'none' ``` ### SizeKeyword Defines the available size options for icons using a semantic scale. Provides granular control over icon dimensions from compact inline sizes to prominent display sizes. ```ts 'small-500' | 'small-400' | 'small-300' | 'small-200' | 'small-100' | 'small' | 'base' | 'large' | 'large-100' | 'large-200' | 'large-300' | 'large-400' | 'large-500' ``` ### MaybeTwoValuesShorthandProperty Defines a shorthand property that accepts either a single value or two space-separated values for directional properties like padding and spacing. ```ts T | `${T} ${T}` ``` ## Best practices * **Set clear dimensions:** Use percentage values for responsive layouts or pixels for exact dimensions. * **Use for appropriate content:** Reserve scroll box for long lists or dynamic content that genuinely needs scrolling, not short content that fits within available space.