title: Vertically wrap items of different sizes inside horizontal scrollview - Flutter
body: <p>I would like to display chips inside of a horizontal scrollview, and display as many rows as can fit in a specified <code>SizedBox</code> height. Any chip that doesn't fit on the screen should be scrolled to horizontally, as shown in the image below. However, I would like to have the chips next to each other rather than in these fixed column sizes (i.e. the &quot;eating healthy&quot; and &quot;pulse checks&quot; chips should be right next to each other. My code looks something like this:</p>
  <pre><code>SizedBox(
    height: 200,
    child: SingleChildScrollView(
      direction: Axis.horizontal
      child: Wrap(
        direction: Axis.vertical,
        runSpacing: 10.0,
        spacing: 8.0,
        children: chipNames
            .map(
              (e) =&gt; SelectableChip(
                label: e,
                modChipSelected: modChipEmotion,
              ),
            )
            .toList(),
      ),
    ),
  );
  </code></pre>
  <p>And this is what I'm getting (the SizedBox correctly determines the height and the horizontal scrollview works, I'm just getting deadspace in between columns):</p>
  <p><a href="https://i.stack.imgur.com/xz5V2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xz5V2.png" alt="Flutter chip image" /></a></p>