应用媒体查询时 Flex 项目消失

Question

更新 使用 Ezra Siton 答案中的链接，我将媒体查询显示更改为阻止，问题就解决了！

在我的 html 代码中，我有一个带有两个孩子的父列 flexbox。第二个孩子本身就是另一个有四个 div 的 flexbox。

我已经在每个 div 中放置了一个画布，然后我将在其中显示一些图表。 子 flexbox 被包裹在大屏幕中，因此显示 2x2 网格。但在较小的屏幕中，例如平板电脑或智能手机，flexbox 装饰应更改为 no-wrap 列：

.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

首先，您的代码是“dirty”（无尽的想法/技巧/溢出/flex 任何属性 :) -- 非常简单的网格布局 = 意外的错误）

为什么不使用简单的 flexbox 网格？ https://css-tricks.com/dont-overthink-flexbox-grids/

关于您的“混乱错误” - 之前 - 由于这两行，蓝卡（第一列）从屏幕上消失了：

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

sn-p

.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>