內容未填滿 flexbox 的整個高度

Question

我在為 Angular 應用程序制作 header 時遇到問題。 現在 header 中的內容沒有填滿容器的整個高度。 我希望 header 正好是 45vh。 內容如何填滿整個寬度？

HTML

<div class="main">
  <div class="left">
    <div class="text">
      <h3 class="subtitle">over 5 categories</h3>
      <h1 class="title">Best Deals on HandOff</h1>
    </div>
    <div class="image">
      <img src="../../../assets/girl_laptop.png" />
    </div>
  </div>
  <div class="right"></div>
</div>

SCSS

.main{
  margin:auto;
  margin-bottom: 5vh;
  width: 85%;
  display: flex;
  background-color: green($color: #000000);
  margin-top: 3vh;
  height: 45vh;

  .left{
    width: 60%;
    display: flex;
    height: 100%;
    margin-right: 4vw;
    border-radius: 8px;
    background-color: rgb(233, 231, 224);

    .title{
      font-size: 4rem;
      color: white;
    }

    .text{
      height: 100%;
    }
  }

  .right{
    width: 30%;
  }
}

Answer 1

[![這是你的 flex 容器的樣子][1]][1]

這是您的彈性容器現在的樣子（我不得不使用不同的圖像）：[1]: https://i.stack.imgur.com/z4dDl.png

由於大標題展開，圖像無法變寬（因此變高）。 您需要在圖像和文本上設置flex-basis來決定您希望每一個有多大。 有關 flex-basis 的更多信息： https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis 。

您可能還想在左側 flex 容器上設置align-items或其他東西以使圖像和文本居中，但這只是猜測，不知道您希望設計看起來像什么。