使用scroll-view实现组件滚动（无法显示滚动组件的原因之一）

<!--pages/scroll-view/lab1.wxml-->
<!-- 允许组件滚动 -->
<scroll-view class="container1" scroll-y>
  <view>A</view>
  <view>B</view>
  <view>C</view>
</scroll-view>

/* pages/scroll-view/lab1.wxss */
.container1 view{
  /* 宽度 */
  width: 100px;
  /* 高度 */
  height: 100px;
  /* 文本居中 */
  text-align: center;
  /* 行高 */
  line-height: 100px;
}
/* 修改组件背景颜色 */
/* 选中特定组件:nth-child(n) */
.container1 view:nth-child(1){
  background-color: aqua;
}
.container1 view:nth-child(2){
  background-color: bisque;
}
.container1 view:nth-child(3){
  background-color: cornsilk;
}

.container1{
  /* 设置滚动边框 */
  border:1px solid red;
  /* 设置滚动高度 */
  height: 100px;
  /* 设置滚动宽度 */
  width: 100px;
}

运行效果：

.container1 view{
  /* 宽度 */
  width: 100px;
  /* 高度 */
  height: 100px;
  /* 文本居中 */
  text-align: center;
  /* 行高 */
  line-height: 100px;
  /* 组件不换行（重点） */
  display: inline-block;
}

.container1{
  /* 使内部组件横向 （重点）*/
  display: flex;
  /* 行内块（重点） */
  white-space: nowrap;
  /* 设置滚动边框 */
  border:1px solid red;
  /* 设置滚动高度 */
  height: 100px;
  /* 设置滚动宽度 */
  width: 100px;
}

运行效果：

如果类名为container，无法实现滚动，运行效果如下：