---
title: "BoxWithConstraints"
description: "A composable that defines its own content according to the available space, based on the incoming
constraints or the current [LayoutDirection]. 


The composable will compose the given children, and will position the resulting layout elements
in a parent layout which behaves similar to a [Box]. The layout will size itself to fit the
content, subject to the incoming constraints. When children are smaller than the parent, by
default they will be positioned inside the layout according to the [contentAlignment]. For
individually specifying the alignments of the children layouts, use the [BoxScope.align]
modifier. By default, the content will be measured without the [Box]'s incoming min constraints,
unless [propagateMinConstraints] is `true`. As an example, setting [propagateMinConstraints] to
`true` can be useful when the [BoxWithConstraints] has content on which modifiers cannot be
specified directly and setting a min size on the content of the [BoxWithConstraints] is needed.
If [propagateMinConstraints] is set to `true`, the min size set on the [BoxWithConstraints] will
also be applied to the content, whereas otherwise the min size will only apply to the
[BoxWithConstraints]. When the content has more than one layout child the layout children will be
stacked one on top of the other (positioned as explained above) in the composition order."
type: "composable"
---

<div class='type'>Composable Function</div>


<a id='references'></a>

<div class='sourceset sourceset-common'>Common</div>


```kotlin
@Composable
fun BoxWithConstraints(
    modifier: Modifier = Modifier,
    contentAlignment: Alignment = Alignment.TopStart,
    propagateMinConstraints: Boolean = false,
    content: @Composable @UiComposable BoxWithConstraintsScope.() -> Unit,
)
```


A composable that defines its own content according to the available space, based on the incoming
constraints or the current `LayoutDirection`. 


The composable will compose the given children, and will position the resulting layout elements
in a parent layout which behaves similar to a `Box`. The layout will size itself to fit the
content, subject to the incoming constraints. When children are smaller than the parent, by
default they will be positioned inside the layout according to the `contentAlignment`. For
individually specifying the alignments of the children layouts, use the `BoxScope.align`
modifier. By default, the content will be measured without the `Box`'s incoming min constraints,
unless `propagateMinConstraints` is `true`. As an example, setting `propagateMinConstraints` to
`true` can be useful when the `BoxWithConstraints` has content on which modifiers cannot be
specified directly and setting a min size on the content of the `BoxWithConstraints` is needed.
If `propagateMinConstraints` is set to `true`, the min size set on the `BoxWithConstraints` will
also be applied to the content, whereas otherwise the min size will only apply to the
`BoxWithConstraints`. When the content has more than one layout child the layout children will be
stacked one on top of the other (positioned as explained above) in the composition order.

#### Parameters

| | |
| --- | --- |
| modifier | Modifier to be applied to the layout. |
| contentAlignment | The default alignment inside the `BoxWithConstraints`. |
| propagateMinConstraints | Whether the incoming min constraints should be passed to content. |
| content | The content of the `BoxWithConstraints`. |





## Code Examples
### BoxWithConstraintsSample
```kotlin
@Composable
fun BoxWithConstraintsSample() {
    BoxWithConstraints {
        val rectangleHeight = 100.dp
        if (maxHeight < rectangleHeight * 2) {
            Box(Modifier.size(50.dp, rectangleHeight).background(Color.Blue))
        } else {
            Column {
                Box(Modifier.size(50.dp, rectangleHeight).background(Color.Blue))
                Box(Modifier.size(50.dp, rectangleHeight).background(Color.Gray))
            }
        }
    }
}
```