---
title: "fitOutside"
description: "If one of the [Ruler]s in [rulers] has a value within the bounds of the Layout, this sizes the
content to that [Ruler] and the edge. If multiple [Ruler]s have a value within the space, only
one is chosen, in this order: [RectRulers.left], [RectRulers.top], [RectRulers.right],
[RectRulers.bottom]. This only works when [Constraints] have
[fixed width][Constraints.hasFixedWidth] and [fixed height][Constraints.hasFixedHeight]. This can
be accomplished, for example, by having [Modifier.size], or [Modifier.fillMaxSize], or other size
modifier before [fitOutside]. If the [Constraints] sizes aren't fixed, or there are no [Ruler]s
within the bounds of the layout, [fitOutside] will size the content area to 0x0."
type: "modifier"
---

<div class='type'>Compose Modifier</div>

<a id='references'></a>
<div class='sourceset sourceset-common'>Common</div>


```kotlin
fun Modifier.fitOutside(rulers: RectRulers): Modifier
```


If one of the `Ruler`s in `rulers` has a value within the bounds of the Layout, this sizes the
content to that `Ruler` and the edge. If multiple `Ruler`s have a value within the space, only
one is chosen, in this order: `RectRulers.left`, `RectRulers.top`, `RectRulers.right`,
`RectRulers.bottom`. This only works when `Constraints` have
`fixed width` and `fixed height`. This can
be accomplished, for example, by having `Modifier.size`, or `Modifier.fillMaxSize`, or other size
modifier before `fitOutside`. If the `Constraints` sizes aren't fixed, or there are no `Ruler`s
within the bounds of the layout, `fitOutside` will size the content area to 0x0.



## Code Examples
### FitInsideOutsideExample
```kotlin
@Composable
fun FitInsideOutsideExample() {
    Box(Modifier.fillMaxSize()) {
        // Drawn behind the status bar
        Box(Modifier.fillMaxSize().fitOutside(StatusBars.current).background(Color.Blue))
        // Drawn behind the navigation bar
        Box(Modifier.fillMaxSize().fitOutside(NavigationBars.current).background(Color.Red))
        // Body of the app
        Box(Modifier.fillMaxSize().fitInside(SafeContent.current).background(Color.Yellow))
    }
}
```