CSS:父元素使用了Flex布局 导致子元素高度未撑开

解决flex布局宽度超出时,子元素被压缩的问题:给每个子元素添加flex-shrink: 0;父元素overflow:auto;实现子元素不压缩,超出宽度展示滚动条

在使用van-swipe时发现swipe的高度不能被图片撑开,排查发现给swipe父元素设置了

#test {
  height: 100%;
  display: flex;
  flex-direction: column;
}

解决方法:给子元素swipe增加属性flex-shrink:0,确保父元素不够大时子元素也不会被压缩。

#test {
  height: 100%;
  display: flex;
  flex-direction: column;
  .banner-box  {
    flex-shrink: 0;
  }
}

 

你可能感兴趣的:(HTML+CSS)