html - Flexbox 子元素在未到达父元素边缘时展开父元素

Question

我正在用 flexbox 制作聊天气泡，容器中有三个子元素(avatar、content、meta ).

---

我所期望的。

avatar、content 元素共享同一行，meta 元素拥有一行。

容器应适合内容。

---

实际发生了什么。

容器会根据 meta 元素的文本宽度展开，即使文本尚未到达容器的边缘也是如此。

---

演示

这是代码。是否有可能防止容器在 meta 元素的文本没有到达容器的边缘？ (不添加任何包装器或更改 flex-direction)

.chat {
  display       : flex;
  flex-wrap     : wrap;
  flex-direction: row;
  width         : max-content;
  background    : black;
}

.chat .avatar {
  width     : 32px;
  height    : 32px;
  background: blue;
}

.chat .content {
  height    : 32px;
  background: yellow;
}

.chat .meta {
  width     : 100%;
  background: red;
}

<div class="chat">
  <div class="avatar"></div>
  <div class="content">
    This is a chat.
  </div>
  <div class="meta">
    10:31 AM
  </div>
</div>

Answer 1

不给 flexbox 元素分配 width，而是使用 flex或 flex-basis .

.chat {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  width: max-content;
  background: black;
}

.chat .avatar {
  flex: 0 0 32px;
  height: 32px;
  background: blue;
}

.chat .content {
  flex: 1 0 auto;
  height: 32px;
  background: yellow;
}

.chat .meta {
  flex: 0 0 100%;
  background: red;
}

<div class="chat">
  <div class="avatar"></div>
  <div class="content">
    This is a chat.
  </div>
  <div class="meta">
    10:31 AM
  </div>
</div>