Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
3.6k views
in Technique[技术] by (71.8m points)

为什么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余下部分宽度来计算

多则缩 少则扩

但是效果是这样的:
image

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

求大神指导。


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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

.box-image {
  width: 100%;
}

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...