fit flex item cross-axis size to content

Question

I have the flex-container with column direction info__text-container whose width is 150px. Inside I have two spans with text that can be wrapped to next line.
What I want is flex item shrink to content when text wraps, but it always remains 150px.
Words are generated dynamically, so I can't just use <br/> or 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

Thank you in advance.

Just to be clear what is the difference between what you have and what you want? — Michael Nelles, Jan 30 '20 at 17:47
It's normal behaviour, if you add a `
` in between your words then you will get what you want or set a fixed width for that block — Huangism, Jan 30 '20 at 17:53
@Huangism content is generated dynamically, so I can't do that. I'll add this information to question. — user12815301, Jan 30 '20 at 18:05

score 0 · Accepted Answer · answered Jan 30 '20 at 18:30

0

With your current HTML structure, you can set a flex-basis: 0 to your .info__text-container class. If you'd like to know what setting the basis to 0 does, see this answer.

answered Jan 30 '20 at 18:30

eMontielG

396
1
7

fit flex item cross-axis size to content

1 Answers1