Flex 布局设置滚动条失效

问题描述

• 在使用 Flex 布局时，由于盒子的宽高自适应，对盒子里面的 item 设置滚动条会导致盒子被撑开

// HTML
<div class="tabs">
    <div
      class="tabs-button"
      :style="{
        height: titleHeight,
        color: titleColor,
        fontSize: titleFontSize,
        border: titleBorder,
        background: titleBackground,
      }"
    >
      <div
        class="tabs-button-item"
        :style="{ borderRight: titleBorderRight }"
        :class="{ active: activeIndex == index }"
        v-for="(item, index) in title"
        :key="index"
        @click="handleTabsClick(index)"
      >
        {{ item }}
      </div>
    </div>
    <div class="tabs-container">
      <div
        class="tabs-container-item"
        :style="{
          color: msgColor,
          fontSize: msgFontSize,
          background: msgBackground,
        }"
        v-for="(item, index) in data"
        :key="index"
      >
        {{ item.value || item.msg }}
      </div>
    </div>
  </div>

// CSS
.tabs {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
  .tabs-button {
    width: 100%;
    height: 30px;
    // border: 2px solid #297ebf;
    // background-color: #fff;
    border-radius: 3px;
    // color: #fff;
    // font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    .tabs-button-item {
      width: 100%;
      height: 100%;
      border-radius: 3px;
      // border-right: 2px solid #297ebf;
      display: flex;
      justify-content: center;
      align-items: center;
      &:last-child {
        border-right: none;
      }
    }
  }
  .tabs-container {
    width: 100%;
    flex: 1
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
    .tabs-container-item {
      width: 100%;
      height: 100%;
      padding: 5px 15px;
      box-sizing: border-box;
      margin: 2px 0;
    }
  }
}
.active {
  background-color: #297ebf;
}

解决方案：

• 将 flex: 1; 设置为 flex: 1 1 auto; 然后将 height 设置为 0
• 首先设置 flex-direction: row 或者 column
• 然后将 flex 设置为 1（由于现在搞不太懂 flex: 1 具体表示什么，所以我用 flex: 1 1 auto）
• 最后将滚动方向的大小（宽度或者高度）设置为 0，即 row -> width:0 或者 column -> height: 0

.tabs-container {
    width: 100%;
    flex: 1 1 auto;
    height: 0;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
    .tabs-container-item {
      width: 100%;
      height: 100%;
      padding: 5px 15px;
      box-sizing: border-box;
      margin: 2px 0;
    }
  }