Custom layout doesn't cause parent to wrap content in jetpack compose

Question

So I have a layout with the following structure:

The layout is as follows:

    Card(
        modifier = Modifier.fillMaxWidth()
    ) {
        Row(
            modifier = Modifier
                .height(IntrinsicSize.Min)
                .clip(...)
        ) {
            Image(
                modifier = Modifier
                    .fillMaxHeight()
                    .width(128.dp)
            )
            Column() { 
                Text()
                Text()
                CustomLayoutSpannableText()
                Column() {
                    Text()
                    Text()
                    ...
                }
            }
        }
    }

For additional context, the custom layout is essentially text, but it is stylized text that can have inline graphics, and different styles etc.

When the custom layout (fig 2) is a single line, the card is sized properly, and all the content fits. However, when (fig 2) wraps to a second line, the card still is sized as if it was a single line, thus pushing the text content (fig 3) out of the bounds of the card. The content out of bounds isn't visible. The top level row contains a height modifier .height(IntrinsicSize.Min), which allows the card to be at a specific height, and allows the image to fill the maximum space.

When I remove the height modifier (with intrinsic height) on the row, the card does expand to fit all the content, but the image doesn't fill the parent area anymore (despite it having a fillMaxHeight() modifier, and it looks like this:

How do I get both, the image to fill the parent's height/size AND the card to expand to the height of the custom layout when having multiple lines?

Answer 1

If you put the .height(IntrinsicSize.Min) at the Card instead of the Row it works.

Card(modifier = Modifier.height(IntrinsicSize.Min)) {
   Row {
     Image(modifier = Modifier
          .width(128.dp)
          .fillMaxHeight()) { ... }
     Column(modifier = Modifier.fillMaxWidth()) {
            Text()
            Text()
            CustomLayoutSpannableText()
            Column() {
                Text()
                Text()
                ...
            }
        }
    }