title: Flutter: Clip a Column or Row to prevent overflow
body: <p>I have a layout structure in Flutter like this:</p>
  <pre><code>Inkwell
    Card
      ScopedModelDescendant
        Column
          Container[]
  </code></pre>
  <p>The number of containers in the column is variable.</p>
  <p>The goal is that it should look like this:</p>
  <p><a href="https://i.stack.imgur.com/6hw0u.png" rel="noreferrer"><img src="https://i.stack.imgur.com/6hw0u.png" alt="expected look" /></a></p>
  <p>But instead, it ends up doing this:</p>
  <p><a href="https://i.stack.imgur.com/EmDJM.png" rel="noreferrer"><img src="https://i.stack.imgur.com/EmDJM.png" alt="actual look" /></a></p>
  <p>I've tried adding a <code>clipBehavior</code> property to the <code>Card</code>, and I've tried mixing in <code>ClipRects</code> anywhere in the structure, but nothing seems to work. My best guess is that a <code>ClipRect</code> above the <code>Column</code> doesn't help because the overflow happens <em>within</em> the column.</p>
  <p>This is the error I'm getting:</p>
  <pre><code>flutter: ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
  flutter: The following message was thrown during layout:
  flutter: A RenderFlex overflowed by 15 pixels on the bottom.
  flutter:
  flutter: The overflowing RenderFlex has an orientation of Axis.vertical.
  flutter: The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
  flutter: black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
  flutter: Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the
  flutter: RenderFlex to fit within the available space instead of being sized to their natural size.
  flutter: This is considered an error condition because it indicates that there is content that cannot be
  flutter: seen. If the content is legitimately bigger than the available space, consider clipping it with a
  flutter: ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,
  flutter: like a ListView.
  flutter: The specific RenderFlex in question is:
  flutter:   RenderFlex#094c9 OVERFLOWING
  flutter:   creator: Column ← ScopedModelDescendant&lt;EventModel&gt; ← Semantics ← DefaultTextStyle ←
  flutter:   AnimatedDefaultTextStyle ← _InkFeatures-[GlobalKey#5fe8b ink renderer] ←
  flutter:   NotificationListener&lt;LayoutChangedNotification&gt; ← CustomPaint ← _ShapeBorderPaint ← PhysicalShape
  flutter:   ← _MaterialInterior ← Material ← ⋯
  flutter:   parentData: &lt;none&gt; (can use size)
  flutter:   constraints: BoxConstraints(w=56.0, h=104.3)
  flutter:   size: Size(56.0, 104.3)
  flutter:   direction: vertical
  flutter:   mainAxisAlignment: start
  flutter:   mainAxisSize: max
  flutter:   crossAxisAlignment: stretch
  flutter:   verticalDirection: down
  flutter: ◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
  flutter: ════════════════════════════════════════════════════════════════════════════════════════════════════
  </code></pre>