防止flex儿童拉伸父母

Question

我是否可以阻止子.title（粉红色的）拉伸父flex并强制它包装单词？当.values垂直拉伸时，此布局非常有效，但在宽屏幕上，我希望.title尽量减少高度（在大多数情况下，它将包含1-3个单词）

html,
body {
  background: #333;
  font-family: Arial;
}

.section {
  display: flex;
  justify-content: space-between;
}

.section .values {
  display: flex;
  background: #333;
  color: white;
  flex-wrap: wrap;
}

.section .values .col {
  border: 1px solid #F012BE;
  justify-content: center;
  text-align: center;
}

.section .values .col>div {
  padding: 5px;
  border: 1px solid #39CCCC;
}

.section .title {
  background: #F012BE;
  color: #333;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  border-left: 2px solid #39CCCC;
}

<div class="section">
  <div class="values">
    <div class="col">
      <div class="original">1</div>
      <div class="processed">3</div>
    </div>
    <div class="col">
      <div class="original">4</div>
      <div class="processed">5</div>
    </div>
    <div class="col">
      <div class="original">6</div>
      <div class="processed">2</div>
    </div>
    <div class="col">
      <div class="original">6</div>
      <div class="processed">5</div>
    </div>
    <div class="col">
      <div class="original">4</div>
      <div class="processed">6</div>
    </div>
    <div class="col">
      <div class="original">7</div>
      <div class="processed">2</div>
    </div>
    <div class="col">
      <div class="original">6</div>
      <div class="processed">5</div>
    </div>
    <div class="col">
      <div class="original">4</div>
      <div class="processed">6</div>
    </div>
    <div class="col">
      <div class="original">5</div>
      <div class="processed">6</div>
    </div>
    <div class="col">
      <div class="original">72</div>
      <div class="processed">9</div>
    </div>
    <div class="col">
      <div class="original">5</div>
      <div class="processed">7</div>
    </div>
    <div class="col">
      <div class="original">6</div>
      <div class="processed">5</div>
    </div>
    <div class="col">
      <div class="original">5</div>
      <div class="processed">7</div>
    </div>
  </div>
  <div class="title">What if title will be long?</div>
</div>