使弹性项目的横轴大小适合内容答案

【问题标题】：fit flex item cross-axis size to content使弹性项目的横轴大小适合内容
【发布时间】：2020-01-31 02:30:06
【问题描述】：

我有列方向为 info__text-container 的 flex-container，其宽度为 150px。在里面我有两个可以换行到下一行的文本跨度。
我想要的是 flex 项目在文本换行时缩小到内容，但它始终保持 150px。
单词是动态生成的，所以我不能只使用<br/> 或smth。
What I have
What I want

body {
  font-family: sans-serif;
}

.info {
  display: flex;
  align-items: center;
}

.info__block-margin {
  margin-right: 48px;
}

.info__number {
  font-size: 40px;
}

.info__number-margin {
  margin-right: 20px;
}

.info__text-container {
  display: flex;
  flex-direction: column;
  max-width: 150px;
}

.info__text {
  min-width: 0;
  font-size: 16px;
  font-weight: bold;
  line-height: 25px;
}

.info__subtext {
  min-width: 0;
  font-size: 14px;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app"></div>
    <div class="info info__block-margin">
      <p class="info__text-container">
        <span class="info__text">Socially SignificantSo </span>
        <span class="info__subtext">Socially SignificantSocial</span>
      </p>
      <span class="info__number">98</span>
    </div>
    <script src="src/index.js"></script>
  </body>
</html>

EXAMPLE

提前谢谢你。

【问题讨论】：

只是想清楚你所拥有的和你想要的有什么区别？
@Nelles 文本和数字之间的空格
这是正常行为，如果您在单词之间添加<br>，那么您将得到您想要的或为该块设置固定宽度
@Huangism 内容是动态生成的，所以我不能这样做。我会将此信息添加到问题中。

标签： html css flexbox

【解决方案1】：

使用您当前的 HTML 结构，您可以将 flex-basis: 0 设置为您的 .info__text-container 类。如果您想知道将基数设置为 0 的作用，请参阅 this answer。

【讨论】：