Consider the Box: ```Box(backgroundColor = Color.B...

# compose

[Fudge]

Consider the Box:

Box(backgroundColor = Color.Blue) {
   Text("Foo")
}

Without specifying any height or width constraints, the Box will automatically size to be the size of the Text (picture 1).
Now, consider picture 2.
The text Foo is not a child of the left box, or the right one. Therefore a possible implementation of that would use a Stack.

Stack {
        Row {
            Box(Modifier.weight(1f).fillMaxWidth(), backgroundColor = Color.Blue)
            Box(Modifier.weight(1f).fillMaxWidth(), backgroundColor = Color.Red)
        }
        Text(text = "foo", textAlign = TextAlign.Center, modifier = Modifier.fillMaxWidth())
    }

The problem now though, is that Box has no children, and would have a height of 0.
Here's another attempt using `ConstraintLayout`:

ConstraintLayout {
    val (left,right,text) = createRefs()
    Box(backgroundColor = Color.Blue, modifier = Modifier.weight(1f).constrainAs(left){
        linkTo(start = parent.start, end = right.start)
    })
    Box(backgroundColor = Color.Red,modifier = Modifier.weight(1f).constrainAs(right){
        linkTo(start = left.start, end = parent.end)
    })

    Text(text = "foo", modifier = Modifier.constrainAs(text){
        linkTo(start = left.start, end = right.end, bottom = left.bottom, top = left.top)
    })
}

This has the same reult as the Stack approach, with the boxes not showing at all.
So how do I communicate to compose that the boxes should be at least the size of the text? The aim is to not hardcode constraints such as Modifier.height().

[matvei]

Even without children Box will obey the Modifier-based enforced sizes if you set them. In the example with Row, you set weight(1f) in both, which will stretch each box horizontally. However , you set no height-enforcing modifier so Boxes have 0 height. you need to replace fillMaxWidth with fillMaxHeight and that should do the trick

[Fudge]

But that will fit the height too much, i want it to wrap around the text

[Fudge]

So if the text is height of 20 it will also have height of 20

[Sean McQuillan [G]]

I think you want IntrinsicSize based on the examples, though I may be misunderstanding the problem

[Sean McQuillan [G]]

@ExperimentalLayout
@Composable
fun SizedBox() {
    Stack(modifier = Modifier.preferredHeight(IntrinsicSize.Min)) {
        Box(
            backgroundColor = Color.Yellow,
            modifier = Modifier
                .fillMaxSize()
        )
        Text("Hello", modifier = Modifier.fillMaxWidth())
    }
}

[Sean McQuillan [G]]

As the general pattern –

Size the parent based on the intrinsic size, then fill it

[Sean McQuillan [G]]

Here's the samples for IntrinsicSize https://cs.android.com/androidx/platform/frameworks/support/+/androidx-master-dev:ui/ui-layout/samples/src/main/java/androidx/compose/foundation/layout/samples/IntrinsicSample.kt?q=androidx%20SameWidthTextBoxes

[Fudge]

I think that’s the one I’m looking for, thanks