给页面一个最小宽度，小于这个宽度时，出现横向滚动条

这里以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，出现了横向滚动，这样页面就不会因为太窄而影响到布局

原文：https://www.cnblogs.com/XHappyness/p/11736979.html