如何使用Flex使div扩展内容？

Question

我有以下HTML和CSS：

.container {
  width: 100%;
}

.group {
  display: flex;
  justify-content: space-between;
  min-width: 214px;
  background: #eee;
}

.abbr {
  /* some styling */
}

.name {
  /* some styling */
}

<div class="container">
  <div class="group">
    <div class="abbr">
      <p>MS</p>
    </div>
    <div>
      <p class="name">Mark Smith</p>
    </div>
  </div>
</div>

现在，如果我仅使用min-width，则整个div都将延伸为容器的整个宽度。如果我仅使用width，则名称长于Mark Smith时它不会扩展（而是会转到下一行）。

这是我想要实现的：

如何在flexbox中实现这一目标？

Answer 1

您要查找的是将 width: fit-content 应用于.group。

然后您可以使用min-width上的.abbr来调整缩写和名称之间的偏移量。

这可以在下面看到：

.group {
  display: flex;
  width: fit-content;
  background: #eee;
  margin: 10px 0;
}

.group > div {
  margin: 0 10px;
}

.abbr {
  min-width: 50px;
}

<div class="container">
  <div class="group">
    <div class="abbr">
      <p>MS</p>
    </div>
    <div>
      <p class="name">Mark Smith</p>
    </div>
  </div>
  <div class="group">
    <div class="abbr">
      <p>MS</p>
    </div>
    <div>
      <p class="name">A Really Really Long Name</p>
    </div>
  </div>
</div>

Answer 2

我在inline-block上使用.container，以便它不会占用整行。

.container {
  display: inline-block;
}

.group {
  display: flex;
  background: #eee;
}

.abbr {
  padding: 0 7px;
}

.name {
  padding: 0 7px;
}

<div class="container">
  <div class="group">
    <div class="abbr">
      <p>MS</p>
    </div>
    <div>
      <p class="name">Mark Smith</p>
    </div>
  </div>
</div><br/><br/>
<div class="container">
  <div class="group">
    <div class="abbr">
      <p>MR</p>
    </div>
    <div>
      <p class="name">Loooooooooooooooong Name</p>
    </div>
  </div>
</div>

另一种解决方案是使用第三个元素，该元素消耗所有剩余空间并仅在文本内容上设置背景色：

.container {
  margin: 0 0 5px 0;
}

.group {
  display: flex;
  
}

.abbr {
  padding: 0 7px;
  background: #eee;
}

.name {
  padding: 0 7px;
  background: #eee;
  flex: 0 0 auto;
}

.blank-space{
  flex: 1 1 auto;
}

<div class="container">
  <div class="group">
    <div class="abbr">
      <p>MS</p>
    </div>
    <div class="name">
      <p>Mark Smith</p>
    </div>
    <div class="blank-space"></div>
  </div>
</div>
<div class="container">
  <div class="group">
    <div class="abbr">
      <p>MR</p>
    </div>
    <div class="name">
      <p>Loooooooooooooooong Name</p>
    </div>
    <div class="blank-space"></div>
  </div>
</div>