收藏
回答

为什么flex-shrink不起作用?

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不起作用

求大神指导。


回答关注问题邀请回答
收藏
登录 后发表内容
问题标签