Пробелы, появляющиеся на веб-странице после горизонтального сворачивания браузера

Question

Вот веб-страница: Вот что происходит после горизонтального сворачивания окна браузера (появляется переполнение, прокручивается полностью вправо):

Как видите, появляется пробел. Я думаю, это связано с тем, что указанная ширина где-то установлена. Однако я не понимаю, почему это поведение.

Вот некоторый код:

<template>
  <div class="dashboardContainer">
    <div class="dashHeader">
        <TopPuddle class="backgroundPuddles topPuddle" />
        <RightPuddle class="backgroundPuddles rightPuddle" />
    </div>
    <div class="dashFooter"></div>

    <div class="dashboardView d-flex flex-row">
      <div class="navBarContainer">
        <NavigationBar />
      </div>

      <div class="dashComponentView">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

Соответствующие стили:

.dashboardContainer {
  height: 3000px;
  display: grid;
  grid-template-columns: 1;
  grid-template-rows: repeat(10, 10%);
}

.navBarContainer {
  height: 100%;
  z-index: 3;
  width: 300px;
}

.dashHeader {
  grid-row-start: 1;
  grid-row-end: 2;
  grid-column-start: 1;
  grid-column-end: span 1;
  @extend %default-background-color;
  z-index: 1;
}

.dashFooter {
  grid-row-start: 2;
  grid-row-end: 11;
  grid-column-start: 1;
  grid-column-end: span 1;
  background: #e5e5e5;
  z-index: 2;
}

.backgroundPuddles {
  position: absolute;
}

.topPuddle {
  top: 0px;
  right: 150px;
}

.rightPuddle {
  top: 0px;
  right: 0px;
}

.dashboardView {
  height: 3000px;
  width: 100%;
  position: absolute;
  z-index: 3;
}

.dashComponentView {
  flex-grow: 1;  
}

Компоненты отображаются в <router-view></router-view>

Вот скелет компонента:

<template>
  <div class="d-flex flex-column dashContainer">
     xxxxx
  </div>
</template>

стили:

.dashContainer {
    height: 100%;
    padding-left: calc((100vw - 300px - 1000px) / 2);
}

и, наконец, приложение. vue:

<template>
  <router-view />
</template>

<style>
</style>

Как видите, я нигде не объявляю явную ширину. Кто-нибудь может сказать мне, почему это происходит? Спасибо

Answer 1

Возможно, вы захотите установить:

overflow-x: hidden;

Это должно исправить любое переполнение на странице, а если это не так, вы также можете попробовать:

max-width: 100vw;
overflow-x: hidden;

Это устанавливает максимальная ширина страницы, и она не может превышать go.