为什么flex-shrink不起作用？

Question

微信小程序开发的

wxml:

<scroll-view scroll-y="true" style="width:100%">
    <radio-group bindchange="radioChange" style="width:100%">
      <view wx:for="{{welfareList}}" class="list-box" wx:key="id">
        <radio value="{{item.id}}"></radio>
        <view class="right-box">
          <view class="title-box">
            <text class="item-title">公益名称: {{item.name}}</text>
            <view class="center-align" bindtap="goToDetail" data-id="{{item.id}}">
              <text class="more-text">了解更多</text>
              <image class="right-btn" src="/static/images/go.png"></image>
            </view>
          </view>
          <image class="box-image" src="{{item.imgSrc}}"></image>
        </view>
      </view>  
    </radio-group>
  </scroll-view>

wxss:

.list-box {
  margin:15px 15px 0 15px;
  padding:10px;
  background-color: white;
  border-radius:8px;
  display: flex;
  align-items: center;
  width:calc(100% - 30px);
  box-sizing: border-box;
}

.right-box{
  flex-grow: 1;
  flex-shrink: 999;
}

希望达到的效果是不论右边部分（.right-box）原始宽度是多少，都按照radio余下部分宽度来计算

多则缩 少则扩

但是效果是这样的：

flex-grow是起作用了
但是flex-shrink不起作用

求大神指导。

Answer 1

给图片设置宽度就可以了吧

.box-image {
  width: 100%;
}

Answer 2

你这个很明显是没有给图片设置宽高。根据你给一楼的回复可以看出 你给的是 图片的容器的宽高，而不是图片的宽高。小程序里 图片的默认宽高是320 * 240

Answer 3

right-box 要设一下 overflow: hidden，因为 overflow 默认是 visible。
另外，right-box 动态伸缩的设置可以简写为 flex: 1。