Html 如何修剪 flex： 1 内的垂直文本

.wrapper {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
}

.wrapper-el {
  display: flex;
  flex: 1;
  border: 2px solid #ddd;
}

.tab {
  height: auto;
  width: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid tomato;
}

.rotate {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-height: 60px;
  max-width: fit-content;
  letter-spacing: 2px;
}

<div class="wrapper">
  <div class="wrapper-el">
    <div class="tab">
      <div class="rotate">title</div>
    </div>
  </div>
  <div class="wrapper-el">
    <div class="tab">
      <div class="rotate">title</div> <!-- isn't centered :/ -->
    </div>
  </div>
  <div class="wrapper-el">
    <div class="tab">
      <div class="rotate">ReallyLongWordNeedsToBeEllipsed</div> <!-- how can this text be trimmed? -->
    </div>
  </div>
</div>