阻止 CSS Grid 列溢出

Question

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

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

我想要达到的目标：

会发生什么：

@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;
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-area: 1 / 2 / 1 / 3;
  border: 1px yellow solid;
}

.right_colomn {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
  -ms-grid-column-span: 1;
  grid-area: 1 / 3 / 1 / 4;
  border: 2px blue solid;
}

.left_column > h1 {
  font-family: "Asap";
  color: #f9faf4;
  font-size: 13rem;
  font-style: normal;
  font-weight: normal;
  line-height: 15.75rem;
  text-transform: uppercase;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border: red 3px solid;
  -o-object-fit: contain;
     object-fit: contain;
  max-width: 100%;
  max-height: 100%;
}

.main_bio {
  color: #f2c4ce;
  font-size: 1.75rem;
  text-decoration: underline;
}

    <main>
        <div class="main_grid">
            <div class="nav_section">
                <nav class="main_nav">
                    <a href="#">home</a>
                    <a href="#">work</a>
                    <a href="#">contact</a>
                </nav>
            </div>
            <div class="left_column">
                <h1 class="main_title">Hello, I'm Jack</h1>
            </div>
           <div class="right_colomn">
              <p class="main_bio">A 20 YEAR OLD FROM A SMALL TOWN NEAR AMSTERDAM. CURRENTLY STUDYING COMPUTER SCIENCE IN LEIDEN.</p>
           </div>
        </div>
    </main>

Answer 1

为避免溢出，您可以将规则 white-space: nowrap; 用于您的 h1。 但是，这也将避免在“Hello”之后换行。

所以我还建议在Hello, 之后添加<br /> 以明确打破该行。

这应该可以解决您的换行问题，但我注意到您还将文本旋转了 90deg，这可能会弄乱单元格内的标题。

所以我建议添加规则 writing-mode: tb-rl (link) 以使文本垂直书写，然后将其旋转 180 度而不是 90 度（因此它变成自下而上而不是自上而下）

这是您的 sn-p 建议更改

@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;
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-area: 1 / 2 / 1 / 3;
  border: 1px yellow solid;
}

.right_colomn {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
  -ms-grid-column-span: 1;
  grid-area: 1 / 3 / 1 / 4;
  border: 2px blue solid;
}

.left_column > h1 {
  font-family: "Asap";
  color: #f9faf4;
  font-size: 13rem;
  font-style: normal;
  font-weight: normal;
  line-height: 15.75rem;
  text-transform: uppercase;
  /* Updated the following 3 lines */
  white-space: nowrap;
  writing-mode: tb-rl;
  -webkit-transform: rotate(-180deg);
          transform: rotate(-180deg);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border: red 3px solid;
  -o-object-fit: contain;
     object-fit: contain;
  max-width: 100%;
  max-height: 100%;
}

.main_bio {
  color: #f2c4ce;
  font-size: 1.75rem;
  text-decoration: underline;
}

    <main>
        <div class="main_grid">
            <div class="nav_section">
                <nav class="main_nav">
                    <a href="#">home</a>
                    <a href="#">work</a>
                    <a href="#">contact</a>
                </nav>
            </div>
            <div class="left_column">
                <h1 class="main_title">Hello,<br/>I'm Jack</h1>
            </div>
           <div class="right_colomn">
              <p class="main_bio">A 20 YEAR OLD FROM A SMALL TOWN NEAR AMSTERDAM. CURRENTLY STUDYING COMPUTER SCIENCE IN LEIDEN.</p>
           </div>
        </div>
    </main>