I can't understand the `IntrinsicSize.Min and Max`...

# compose

[Kazemihabib1996]

I can't understand the IntrinsicSize.Min and Max for example:

@Composable
fun SameWidthBoxes() {
    // Builds a layout containing three Box having the same width as the widest one.
    //
    // Here preferredWidth min intrinsic is adding a width premeasurement pass for the
    // Column, whose minimum intrinsic width will correspond to the preferred width of the largest
    // Box. Then preferredWidth min intrinsic will measure the Column with tight width, the
    // same as the premeasured minimum intrinsic width, which due to fillMaxWidth will force
    // the Box's to use the same width.
    Stack {
        Column(Modifier.preferredWidth(IntrinsicSize.Min).fillMaxHeight()) {
            Box(
                modifier = Modifier.fillMaxWidth().preferredSize(20.dp, 10.dp),
                backgroundColor = Color.Gray
            )
            Box(
                modifier = Modifier.fillMaxWidth().preferredSize(30.dp, 10.dp),
                backgroundColor = Color.Blue
            )
            Box(
                modifier = Modifier.fillMaxWidth().preferredSize(10.dp, 10.dp),
                backgroundColor = Color.Magenta
            )
        }
    }
}

In this example changin Min to Max makes no difference.
I'm trying to understand the difference of them.
but in the below one:

@Composable
fun SameWidthTextBoxes() {
    // Builds a layout containing three Text boxes having the same width as the widest one.
    //
    // Here preferredWidth max intrinsic is adding a width premeasurement pass for the Column,
    // whose maximum intrinsic width will correspond to the preferred width of the largest
    // Box. Then preferredWidth max intrinsic will measure the Column with tight width, the
    // same as the premeasured maximum intrinsic width, which due to fillMaxWidth modifiers will
    // force the Boxs to use the same width.
    Stack {
        Column(Modifier.preferredWidth(IntrinsicSize.Max).fillMaxHeight()) {
            Box(Modifier.fillMaxWidth(), backgroundColor = Color.Gray) {
                Text("Short text")
            }
            Box(Modifier.fillMaxWidth(), backgroundColor = Color.Blue) {
                Text("Extremely long text giving the width of its siblings")
            }
            Box(Modifier.fillMaxWidth(), backgroundColor = Color.Magenta) {
                Text("Medium length text")
            }
        }
    }
}

it makes difference.
I can't understand why in the SameWidthBoxes IntrinsicSize.Min means :
minimum intrinsic width will correspond to the preferred width of the largest Box
why not the smallest Box.
as it is in SameWidthTextBoxes sample.

[Kazemihabib1996]

Hmm, I found more description about it:
/**
* Calculates the minimum width that the layout can be such that
* the content of the layout will be painted correctly.
*/
fun IntrinsicMeasurable.minIntrinsicWidth(height: IntPx) =
minIntrinsicWidth(height, layoutDirection)

/**
* Calculates the smallest width beyond which increasing the width never
* decreases the height.
*/
fun IntrinsicMeasurable.maxIntrinsicWidth(height: IntPx) =
maxIntrinsicWidth(height, layoutDirection)

I think I got it now.

[Mihai Popa]

Sorry for the delay - both the min and max intrinsic widths of the Column will be the max of the corresponding intrinsic widths of the children

[Mihai Popa]

But the child of the Column can be a Text, which has different min and max inrinsics - max will correspond to putting all the text on one line and min will correspond to putting one word per line

[Mihai Popa]

This area of layouts is a bit harder to grasp, it might also be subject to change in the next couple of months

[Mihai Popa]

Let me know if this made sense 🙂

[Kazemihabib1996]

@Mihai Popa Thank you, yeah your description made it clear.
min will correspond to putting one word per line 🤔 , on word per line?
I thought it works like this:
calculate the size of longest word
put that longest word on one line
other lines can contain one or more but it shouldn't exceed the size of longest word.

[Kazemihabib1996]

similar to this from
https://ishadeed.com/article/intrinsic-sizing-in-css/

[Mihai Popa]

Yep, exactly