---
title: "RemoteFitBox"
description: "Layout container that renders the first child that fits within available constraints."
type: "composable"
lastmod: "2026-08-27"
---
## API Reference

### RemoteFitBox

> Source set: Android

```kotlin
@Composable
public fun RemoteFitBox(
    modifier: RemoteModifier = RemoteModifier,
    horizontalAlignment: RemoteAlignment.Horizontal = RemoteAlignment.CenterHorizontally,
    verticalArrangement: RemoteArrangement.Vertical = RemoteArrangement.Center,
    content: @RemoteComposable @Composable () -> Unit = {},
)
```

Layout container that renders the first child that fits within available constraints.

Functions as a [RemoteBox](/jetpack-compose/androidx.compose.remote/remote-creation-compose/composable-functions/RemoteBox/api) and acts as an alternative-selector container during playback.

Selection behavior:
- Measures children sequentially and renders only the first child whose width and height fit
within available constraints.
- Matches container dimensions to the measured size of the selected child.
- Hides completely (`GONE`) if no child fits within the constraints.

#### Parameters

| | |
| --- | --- |
| modifier | modifier applied to this layout |
| horizontalAlignment | horizontal alignment for children |
| verticalArrangement | vertical arrangement for children |
| content | composable children to lay out inside this [RemoteFitBox](/jetpack-compose/androidx.compose.remote/remote-creation-compose/composable-functions/RemoteFitBox) |

## Code Examples

### RemoteFitBoxSample

```kotlin
@Sampled
@PreviewWrapper(RemoteComponentPreviewWrapper::class)
@Composable
fun RemoteFitBoxSample() {
    // The parent RemoteBox constrains the available space to 40.rdp.
    // RemoteFitBox will measure its children against these constraints.
    // Child 1 (50.rdp) is too large to fit, so the RemoteFitBox skips it and selects
    // Child 2 (30.rdp) which fits within the 40.rdp constraints.
    RemoteBox(modifier = RemoteModifier.size(40.rdp).background(Color.LightGray.rc)) {
        RemoteFitBox(
            horizontalAlignment = RemoteAlignment.CenterHorizontally,
            verticalArrangement = RemoteArrangement.Center,
        ) {
            // Child 1: Too large for 40.rdp container
            RemoteBox(RemoteModifier.size(50.rdp).background(Color.Red.rc))

            // Child 2: Fits in 40.rdp container and will be rendered
            RemoteBox(RemoteModifier.size(30.rdp).background(Color.Blue.rc))
        }
    }
}
```