Flexbox子元素宽度缩小为0

Question

我试图像这样创建一个flexbox水平可滚动div。

<div class="hz-panel">
   <div class="list-holder">
      <img src="abc.png" width="40"/>
      <p>Deals</p>
   </div>
</div>  

这里是相同的CSS

.hz-panel {
 background: #ffffff;
 overflow-x: scroll;
 display: flex;
 padding: 0 3%;
}

.hz-panel .list-holder {
      padding: 15px 13px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
 }

在我的Chrome浏览器和Android Marshmallow webview上正常工作，问题出现在kitkat webview上，整个可滚动列表在压缩（一个在另一个上）时折叠，因为每个列表持有者的宽度在填充时都变为零。我怎样才能避免这个问题。父母应该根据其子女的内容增长。一种解决方案是将min-width div的list-holder设置为54px。但必须有一个避免这种情况的好方法。

请帮助。