Flexbox div 没有占用整个垂直空间

Question

我遇到了 flexbox 没有按照我的意图填充空间的问题，我想看看我遗漏了什么，但无法理解它。 以下是我的问题的重现，并附有指向 codepen 的链接。 我需要中间的 div 用 class="artcl-description" 来填充剩余的可用空间，考虑到页眉和页脚及其内容，我尝试给父 (class="artcl-content-container") 属性 align-items: stretch; justify-content: stretch;但没有 bueno，如果可能的话，我不想诉诸硬编码的高度值和百分比：/

html：

<div class="artcl-container">
  <div class="artcl-content-container">
    <div class="artcl-title-container">
      <h1>Some Title</h1>
    </div>
    <div class="artcl-description">
      <p>Why is this not taking the remaining height?</p>
    </div>
    <div class="artcl-footer">
      <div>Some guy</div>
      <div>
        X/X/XXXX XX:XX:XX
      </div>
    </div>
  </div>
  <img class="artcl-thumbnail" src="https://picsum.photos/200" />
</div>

scss：

$article-height: 240px;
$pad: 16px;

body {
  padding: 16px;
}

* {
  direction: ltr;
  margin: 0px;
}

.artcl-container {
  height: $article-height;
  background-color: black;
  color: white;
  font-family: sans-serif;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  .artcl-thumbnail {
    height: $article-height;
    width: $article-height;
    object-fit: cover;
  }
  .artcl-content-container {
    flex: 1;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    .artcl-title-container {
      padding: $pad;
      border: dashed 1px wheat;
    }
    .artcl-description {
      flex: 1;
      padding: $pad;
      border: dashed 1px wheat;
    }
    .artcl-footer {
      padding: $pad;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      border: dashed 1px wheat;
    }
  }
}

Link to Pen

Answer 1

您忘记将 display: flex; 添加到您的类 .artcl-content-container。我将它添加到您的笔中，效果很好。