How to stop flexbox from wrapping words and creating equal width?

Question

I am trying to create a panel that looks something like this:

-------------------------------------------
|                              |          |
|       Ready   3  Not Ready 2 |   Total  |
|   A                          |    16    |
|       Talking 4  Outbound 3  |          |
-------------------------------------------

My first thought was to do this with CSS flexbox and I was able to get very close. The issue I am running into is the middle section of the panel that shows Ready, Not Ready, Talking, and Outbound. I would like each item to be equal width and have no word wrap.

I was able to get them equal width. However, I cant stop the items from word wrapping. Does anyone know what I am missing?

.panel {
  padding: 0 15px;
}

.panel>div {
  display: flex;
  align-items: center;
}

.panel-row {
  flex-direction: column;
}

.panel-stats {
  display: flex;
  flex-direction: column;
  border: 1px solid blue;
}

.panel-grid-row {
  background: yellow;
  display: flex;
  flex-direction: row;
}

.panel-grid-item {
  background: tomato;
  flex: 1;
}

<div class="panel">
  <div class="panel-container">
    <div class="panel-icon">A</div>
    <div class="panel-stats">
      <div class="panel-grid-row">
        <div class="panel-grid-item">Ready 7</div>
        <div class="panel-grid-item">Not Ready 2</div>
      </div>
      <div class="panel-grid-row">
        <div class="panel-grid-item">Talking 4</div>
        <div class="panel-grid-item">Outbound 3</div>
      </div>
    </div>
    <div class="panel-total panel-row">
      <div class="total-label">Total</div>
      <div class="total-num">16</div>
    </div>
  </div>
</div>

Answer 1

The problem is that nowrap is computed after the width of the container is established.

Since the container's width is set to the default auto, this length is computed first based on the length of the wrapping text.

Then nowrap is applied, which obviously lengthens the text, which overflows the previously established container width.

.panel {
  padding: 0 15px;
}

.panel>div {
  display: flex;
  align-items: center;
}

.panel-row {
  flex-direction: column;
}

.panel-stats {
  display: flex;
  flex-direction: column;
  border: 1px solid blue;
}

.panel-grid-row {
  background: yellow;
  display: flex;
  flex-direction: row;
}

.panel-grid-item {
  background: tomato;
  flex: 0 0 50%;
  white-space: nowrap; /* equal width works if you remove nowrap */
}

<div class="panel">
  <div class="panel-container">
    <div class="panel-icon">A</div>
    <div class="panel-stats">
      <div class="panel-grid-row">
        <div class="panel-grid-item" style="background-color: yellow">Ready 7</div>
        <div class="panel-grid-item" style="background-color: lightgreen">Not Ready 2</div>
      </div>
      <div class="panel-grid-row">
        <div class="panel-grid-item" style="background-color: yellow">Talking 4</div>
        <div class="panel-grid-item" style="background-color: lightgreen">Outbound 3</div>
      </div>
    </div>
    <div class="panel-total panel-row">
      <div class="total-label">Total</div>
      <div class="total-num">16</div>
    </div>
  </div>
</div>

The simplest solution (if it's an option) would be to define the width of the container.

.panel {
  padding: 0 15px;
}

.panel>div {
  display: flex;
  align-items: center;
}

.panel-row {
  flex-direction: column;
}

.panel-stats {
  display: flex;
  flex-direction: column;
  border: 1px solid blue;
}

.panel-grid-row {
  background: yellow;
  display: flex;
  flex-direction: row;
  width: 200px;  /* NEW */
}

.panel-grid-item {
  background: tomato;
  flex: 0 0 50%;
  white-space: nowrap;  /* NEW */
}

<div class="panel">
  <div class="panel-container">
    <div class="panel-icon">A</div>
    <div class="panel-stats">
      <div class="panel-grid-row">
        <div class="panel-grid-item" style="background-color: yellow">Ready 7</div>
        <div class="panel-grid-item" style="background-color: lightgreen">Not Ready 2</div>
      </div>
      <div class="panel-grid-row">
        <div class="panel-grid-item" style="background-color: yellow">Talking 4</div>
        <div class="panel-grid-item" style="background-color: lightgreen">Outbound 3</div>
      </div>
    </div>
    <div class="panel-total panel-row">
      <div class="total-label">Total</div>
      <div class="total-num">16</div>
    </div>
  </div>
</div>