Vertically wrap items of different sizes inside horizontal scrollview - Flutter

Question

I would like to display chips inside of a horizontal scrollview, and display as many rows as can fit in a specified SizedBox 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 "eating healthy" and "pulse checks" chips should be right next to each other. My code looks something like this:

SizedBox(
  height: 200,
  child: SingleChildScrollView(
    direction: Axis.horizontal
    child: Wrap(
      direction: Axis.vertical,
      runSpacing: 10.0,
      spacing: 8.0,
      children: chipNames
          .map(
            (e) => SelectableChip(
              label: e,
              modChipSelected: modChipEmotion,
            ),
          )
          .toList(),
    ),
  ),
);

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):