内容没有填满 flexbox 的整个高度答案

【问题标题】：Content not filling entire height of flexbox内容没有填满 flexbox 的整个高度
【发布时间】：2020-11-24 16:20:18
【问题描述】：

我在为 Angular 应用程序制作标题时遇到问题。现在标题中的内容没有填满容器的整个高度。我希望标题正好是 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%;
  }
}

【问题讨论】：

标签： html css sass flexbox

【解决方案1】：

[![这是你的弹性容器的样子][1]][1]

这是您的 flex 容器现在的样子（我不得不使用不同的图像）： [1]：https://i.stack.imgur.com/z4dDl.png

由于大标题展开，图片无法变宽（因此变高）。您需要在图像和文本上设置flex-basis，以决定您希望每个图像有多大。更多关于弹性：https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis.

您可能还想在左侧 flex 容器上设置 align-items 或其他内容以使图像和文本居中，但这只是猜测，不知道您希望您的设计是什么样子。

【讨论】：