給頁面一個最小寬度，小於這個寬度時，出現橫向滾動條

這里以vue-cli初始化的項目為例：

1. body,html

html,
body {
	height: 100%;
	width: 100%;
}

2. App.vue中

#app {
  height: 100%;
  width: 100%;
}

3. Home.vue組件

<template>
  <div class="home">
    <header class="header">title</header>
    <div class="content">
      <router-view />
    </div>
  </div>
</template>

.home {
  min-width: 1024px; // 設置的最小寬度，小於1024時，會出現滾動條
  min-height: 100%;
  background-color: #09152C;
  display: flex;  
  flex-direction: column; 
  .header {
    height: 57px;
    background-color: red;
    color: #ffffff;
    display: flex;
    align-items: center;
    padding: 0 20px;
    font-size: 16px;
    font-weight: bold;
  }
  .content {
    flex-grow: 1; // 讓content高度鋪滿剩余的home
    display: flex; //讓里面的直接子元素高度占滿整個content
    padding: 0 10px 32px;
    > div {
      width: 100%;
      background: yellow;
      color: #000;
    }
  }
}

4.最終效果

此時屏幕寬度小於1024px，出現了橫向滾動，這樣頁面就不會因為太窄而影響到布局