内容未填满 flexbox 的整个高度

Question

I am having trouble making a header for an Angular app. Right now the content in the header is not filling the entire height of the container. I want the header to be exactly 45vh. How can the content fill the entire width?

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

[![Here's what your flex container looks like][1]][1]

Here's what your flex container looks like now (I had to use a different image): [1]: https://i.stack.imgur.com/z4dDl.png

The image can't get any wider (and therefore taller) because of the large headline expanding. You need to set flex-basis on the image and the text to decide how big you want each one to be. More on flex-basis: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis .

You probably also want to set align-items or something on the left flex container to center the image and text, but that's just speculation without knowing what you want your design to look like.