小编Jac*_*ack的帖子

阻止 CSS 网格列溢出

我尝试用 max-height、max-width 来阻止列溢出,但它似乎不起作用。

我用 CSS 网格制作了三列。一种用于导航部分,一种用于左列,一种用于右列。左栏部分不断溢出导航部分和右栏部分,如屏幕截图所示。

我想要实现的目标:

在此输入图像描述

会发生什么:

在此输入图像描述

@import url("https://fonts.googleapis.com/css2?family=Asap:wght@400;700&display=swap");
* {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  background-color: #4a6163;
  font-family: "Asap";
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.main_grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 0.25fr (1fr)[2];
      grid-template-columns: 0.25fr repeat(2, 1fr);
  -ms-grid-rows: 1fr;
      grid-template-rows: 1fr;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  max-height: 100%;
  max-width: 100%;
}

.nav_section {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-area: 1 / 1 / 1 / 2;
  border: 3px yellow solid;
}

.left_column {
  -ms-grid-row: 1; …
Run Code Online (Sandbox Code Playgroud)

html css css-grid

8
推荐指数
1
解决办法
247
查看次数

标签 统计

css ×1

css-grid ×1

html ×1