flex布局均分高度了，没有自适应内容高度，怎么回事

前言
flex布局中，通常我们都希望子元素的高度是自适应、自动被内容撑开，我们的做法基本是直接display:flex，不需要额外再去设置其他属性就会得到下面的效果。但是最近使用uniapp模拟产品分类demo的时候，发现flex布局后，高度在右边的‘功能研发中，敬请期待’盒子比较少的情况下竟然自动被平分了，而不是根据内容自适应高度了，如下面的图片（如果盒子比较多，一屏装不下的时候不会被平分，还是由内容撑开）。

疑问点
通常的话应该不会出现高度自动平分的情况，我这里出现的原因是因为右边高度自动占比height:100%的缘故。flex布局中，align-content属性（多根轴线对齐方式）的默认值是stretch。对于stretch值的说明：各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于’flex-start’。在其它情况下，剩余空间被所有行平分，以扩大它们的侧轴尺寸。所以就会出现上面的情况。

解决方案
其实很简单，直接去设置align-content的属性值为flex-start，或者其他你想要的效果值即可。

// html结构
<view class="container">
		<view class="left">
			<view 
				class="good-class" 
				:class="{'active': active === index}" 
				v-for="(item,index) in 30" 
				:key="index" 
				@click="handleSelectClass(index)">
				手机数码
			</view>
		</view>
		<view class="right">
			<view class="good-item" v-for="(item,index) in 5" :key="index">
				<view class="good-img">
					<view class="img-desc">功能研发中，敬请期待{{index}}</view>
				</view>
			</view>
		</view>
	</view>

// css样式，只粘贴相关部分css
.container {
		position: absolute;
		bottom: 0;
		top: 0;
		left: 0;
		right: 0;
		overflow: hidden;
		display: flex;
		.left {
			width: 200rpx;
			height: 100%;
			background-color: #f7f7f7;
			text-align: center;
			overflow: auto;
		}

		.right {
			flex: 1;
			overflow: auto;
			padding: 20rpx;
			display: flex;
			flex-wrap: wrap;
			align-content: flex-start;
			height: 100%;
			.good-item{
				width: 50%;
			}
		}
	}

更多flex布局相关问题推荐查看绵羊万的这篇文章，通过图案结合文字说明的方式去理解会事半功倍
flex布局图解，点击查看