微信小程序填坑----scroll-view与flex布局bug

问题描述

:当父级使用flex布局(垂直方向),子元素由两个scroll-view组成,结构如下:

<view class="container">
    <scroll-view scroll-x="true" class="item-1">scroll-view>
    <scroll-view scroll-y="true" class="item-2">scroll-view>
view>
.container{ display:flex; flex-direction:column;}
.container .item-1{ flex:0; height:100rpx;}
.container .item-2{ flex:1; height:100%;}

这样写会出错:item-2的高度会和container一样,导致item-2的内容会被截取掉一部分(截取部分的高等于item-1的高度)

解决办法

给item-2添加样式{ display:flex;}即可解决。item-2的高会只占用剩下部分,不会和父级一样高。

你可能感兴趣的:(知识点)