奇怪的display和scroll组合_display:scroll

奇怪的display和scroll组合
我在用uniapp中写项目时发现了这样一个奇怪的现象，实现一个简单的左右布局，我为了让他们两个view在同一行，分别添加了属性display:inline-block

左侧

.concat-left {
			display: inline-block;
			width: 220rpx;
			height: calc(100% - 106rpx);
			overflow-y: scroll;
			box-sizing: border-box;
			border: 1rpx solid #eee;
			.category {
				text-align: center;
				height: 120rpx;
				line-height: 120rpx;
				border: 1rpx solid #eee;
				box-sizing: border-box;

				&.active {
					background-color: red;
				}
			}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

右侧

.concat-right{
			width: 520rpx;
			height: calc(100% - 100rpx);
			display: inline-block;
		}
1
2
3
4
5

原本没有添加display:inline-block不会出现额外的滚动条，添加之后就出现了。

高度没有超出视口，但是出现滚动条了， 而且当我注释了scroll

// overflow-y: scroll;
1

或者将display改为block是就不会出现滚动条。
这两个碰在一起出现了奇怪的滚动条，我想到的解决办法就是不使用display:inline-block来实现左右布局，改为float，最后获得自己想要的效果。

如果有大佬能够解释上面现象出现的原因，或者有更好的修改方案，万望留言告知，感激不敬。