如何防止垂直滚动条被推出宽内容视图

.container {
  width: 100%;
  overflow-y: auto; /* 显示垂直滚动条 */
  scrollbar-width: thin; /* 薄滚动条（适用于Firefox） */
  -ms-overflow-style: none; /* 隐藏滚动条（适用于IE和Edge） */
}

.container::-webkit-scrollbar {
  width: 8px; /* 滚动条宽度（适用于Chrome和Safari） */
}

.container::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 4px;
}

.container::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

<div class="container">
  <div class="content">
    <!-- 内容 -->
  </div>
</div>

.container {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow-y: auto;
}

.content {
  flex: 1;
}

<div class="container">
  <div class="content">
    <!-- 内容 -->
  </div>
</div>

.container {
  display: grid;
  width: 100%;
  overflow-y: auto;
}

.content {
  grid-area: 1 / 1 / 2 / 2;
}