Элемент Flex исчезает при применении медиазапроса

Question

ОБНОВЛЕНИЕ Используя ссылку в ответе Эзры Ситона, я изменил отображение медиазапроса на блокировку, и проблема решена!

В моем коде html у меня есть flexbox для родительского столбца с двумя дочерними элементами. Второй дочерний элемент сам по себе является еще одним flexbox с четырьмя элементами.

Я поместил холст в каждый элемент, и далее я покажу некоторые диаграммы в них. Дочерний флексбокс упакован в большие экраны, поэтому отображается сетка 2х2. Но на экранах меньшего размера, например планшетах или смартфонах, оформление флексбокса следует заменить на столбец без переноса:

.inst-data {
  padding: 20px;
  position: fixed;
  width: 90%;
  height: 90vh;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 1);
  border-radius: 15px;
  border: 2px dotted orangered;
  z-index: 100;
}

.grid-container {
  display: flex;
  align-content: center;
  justify-content: center;
  width: 100%;
  height: 80vh;
  flex-wrap: wrap;
}

.grid-item {
  border-radius: 15px;
  margin: 10px;
  width: 45%;
  height: 45%;
  background-color: orchid;
}

@media (max-width: 800px) {
  .grid-container {
    overflow-y: auto;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-items: center;
    align-items: center;
  }
  .grid-item {
    width: 90%;
  }
}

<div class="inst-data shadow">
  <div class="d-flex flex-column justify-content-center align-items-center">
    <h2 class="text-center border-bottom my-2" style="height: 10%; width: 100%;">Title</h2>
    <div class="grid-container" id="ch-div">
      <canvas id="buy-chart" width="200" height="200" class="grid-item"></canvas>
      <canvas id="net-chart" width="200" height="200" class="grid-item"></canvas>
      <canvas id="stock-chart" width="200" height="200" class="grid-item"></canvas>
      <canvas id="price-chart" width="200" height="200" class="grid-item"></canvas>
    </div>
  </div>
</div>

При тестировании медиазапроса верхний холст исчезает и недоступен даже с полосой прокрутки. Что мне делать?

Answer 1

Во-первых, ваш код " грязный " (бесконечные идеи / хитрости / переполнение / сгибание любых свойств там :) - для очень простого макета сетки = неожиданно ошибки )

Почему бы не использовать простую сетку flexbox? https://css-tricks.com/dont-overthink-flexbox-grids/

О вашей "ошибке хаоса" - до этого - голубая карта (Первый столб) исчезает с экрана из-за этих двух строк:

  align-content: center;
  justify-content: center;

фрагмент

.grid-container {
  display: flex;
  align-content: center;
  justify-content: center;
  width: 100%;
  height: 80vh;
  border: 5px solid red;
  flex-wrap: wrap;
  overflow-y: auto;
}

.grid-item {
  border-radius: 15px;
  margin: 10px;
  width: 100%;
  height: 45%;
  background-color: orchid;
}

<h2>The blue box out of the screen</h2>
<div class="inst-data shadow">
  <div class="d-flex flex-column justify-content-center align-items-center">
    <h2 class="text-center border-bottom my-2" style="height: 10%; width: 100%;">Title</h2>
    <div class="grid-container" id="ch-div">
      <canvas id="buy-chart" style="background: blue;" width="200" height="200" class="grid-item">1</canvas>
      <canvas id="net-chart" width="200" height="200" class="grid-item">2</canvas>
      <canvas id="stock-chart" width="200" height="200" class="grid-item">3</canvas>
      <canvas id="price-chart" style="background: red;" width="200" height="200" class="grid-item">4</canvas>
    </div>
  </div>
</div>

Перейдите наверх ==> исправьте свою проблему (но опять же, возможно, используйте подход с использованием кода различий):

  align-content: top;
  justify-content: center;

.grid-container {
  display: flex;
  align-content: top;
  justify-content: center;
  width: 100%;
  height: 100vh;
  border: 5px solid red;
  flex-wrap: wrap;
  overflow-y: auto;
}

.grid-item {
  border-radius: 15px;
  margin: 10px;
  width: 100%;
  height: 45%;
  background-color: orchid;
}

  <div class="inst-data shadow">
    <div class="d-flex flex-column justify-content-center align-items-center">
      <h2 class="text-center border-bottom my-2" style="height: 10%; width: 100%;">Title</h2>
      <div class="grid-container" id="ch-div">
        <canvas id="buy-chart" style="background: blue;" width="200" height="200" class="grid-item">1</canvas>
        <canvas id="net-chart" width="200" class="grid-item">2</canvas>
        <canvas id="stock-chart" width="200"  class="grid-item">3</canvas>
        <canvas id="price-chart" style="background: red;"  class="grid-item">4</canvas>
      </div>
    </div>
  </div>