解决flex布局页面在缩放时右侧会出现一块空白区域问题

问题如图：

以下为原代码部分：

<template>
<div class="page-container">
    <Sidebar/>
    <main class="main-content">
    </main>
</div>
</template>

<style lang="scss">
.page-container {
  display: flex;
  height: 100vh;
  background: #f5f6f7;
  overflow: hidden;

  .main-content {
    width: 100%;
    flex: 1;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
  }

  .breadcrumbs {
    background-color: #fff;
    padding: 16px;
    font-size: 13px;
    color: #888;
  }
}
</style>

分析原因：

右侧出现空白通常是：

1. 子元素宽度超出了容器（比如某个元素 min-width 太大或 overflow 没限制）。

2. 父元素 .page-container 并未正确限制子元素横向溢出。

===>  .main-content 的宽度处理或子元素布局导致 超出容器宽度，从而 触发水平滚动或溢出现象。

<style lang="scss">
.page-container {
  display: flex;
  height: 100vh;
  background: #f5f6f7;
  overflow: hidden;         // 防止溢出

  // 添加以下代码，修复右侧空白
  width: 100vw;              // 强制限制最大宽度不超过视口
  max-width: 100vw;          // 防止子元素撑出

    
  .main-content {
      flex: 1;                  
      min-width: 0;             // 防止子元素溢出撑开
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
  }
}

</style>

为什么用 min-width: 0？

在 flex 布局中，子元素默认 min-width: auto，会导致子元素内容太长时撑破父容器。加上 min-width: 0 可以避免这个问题。