html - 如何阻止 flexbox 换行并创建相等的宽度？

Question

我正在尝试创建一个看起来像这样的面板:

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

我的第一个想法是用 CSS flexbox 来做到这一点，我已经非常接近了。我遇到的问题是显示 Ready、Not Ready、Talking 和 Outbound 的面板中间部分。我希望每个元素的宽度相等并且没有自动换行。

我能够让它们的宽度相等。但是，我无法阻止这些元素自动换行。有谁知道我错过了什么？

.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

问题是 nowrap 是在容器宽度确定后计算的。

由于容器的宽度设置为默认的 auto，因此首先根据环绕文本的长度计算该长度。

然后应用了nowrap，明显拉长了文本，溢出了之前建立的容器宽度。

.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>

最简单的解决方案(如果可以的话)是定义容器的宽度。

.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>