title: How does the chain of wrapContentSize, width and fillMaxSize modifiers work together in Compose
body: <p>The <a href="https://developer.android.com/codelabs/jetpack-compose-animation" rel="nofollow noreferrer">Jetpack Compose Animation Codelab</a> contains a custom TabRow's indicator <code>HomeTabIndicator</code>. It takes the <code>TabPosition</code> coordinates and renders a <code>Box</code> using the following chain of modifiers:</p>
  <pre><code>    val indicatorLeft = tabPositions[tabPage.ordinal].left
      val indicatorRight = tabPositions[tabPage.ordinal].right
      Box(
          Modifier
              .fillMaxSize()
              .wrapContentSize(align = Alignment.BottomStart)
              .offset(x = indicatorLeft)
              .width(indicatorRight - indicatorLeft)
              .padding(4.dp)
              .fillMaxSize()
              .border(
                  ...border params
              )
      )
  </code></pre>
  <p>How do the modifiers in the chain <code>fillMaxSize &gt; wrapContentSize &gt; offset &gt; width &gt; fillMaxSize</code> play together?</p>