当背景重复时，是否可以使css flexbox响应？

Question

我创建了JsFiddle这是我的问题的一个例子。

<div>
 <span class="side"></span>
 <span class="middle"></span>
 <span class="side"></span>
</div>

我想创建一个由3个部分组成的页脚（1 - 中间的图像，左侧和右侧的2和3 - 重复图像）。 在我的情况下，问题是没有响应。正如您在屏幕截图中看到的，它之间有额外的空间。 我尝试对 .side 应用flex-shrink，但没有运气。