How to Set WordPress Column Block to Resize Responsively instead of Wrap

I’m using the WordPress columns block to display a list of three services, just like in this example.

As the page width shrinks (or on a device with a smaller screen), the column block uses flex-wrap: wrap; to wrap the column contents (as in the “wrap” example, here), which looks awkward with three columns on a small screen, because one column just ends up hanging below the others or eventually displays the columns all vertically, instead of horizontally.

Instead, I’d like to columns to behave so that their contents resize dynamically, all staying in one (horizontal) row, but becoming smaller / shrinking in size as the screen width becomes smaller. What is the correct CSS to modify the columns block to behave in this way?

Just setting the block to flex-wrap: nowrap; keeps the columns all on one (horizontal) row, but what is the right CSS to make the contents of the column (below) responsively shrink as the screen width is reduced, so they don’t all overlap each other as the screen width shrinks?

<div class="wp-block-column">
<div class="wp-block-image">
<figure class="aligncenter">
<a href="[link to page]" target="_blank" rel="noopener noreferrer"><img src="[link to image]" class="wp-image-[###]" width="64" height="64">
</a>
</figure>

<h3>
<a href="[link to page]>Service Title
</a>
</h3>
</div>