how to trim vertical text inside flex: 1?

Question

I'm struggling to center and trim a vertical rotated text inside a 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>

this is a similar example to my approach, but on my machine it looks like this:

Answer 1

You are almost good, you were missing a few properties. Check the comments:

.wrapper {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
}

.wrapper-el {
  display: flex;
  flex: 1;
  min-height: 0; /* added */
  border: 2px solid #ddd;
}

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

.rotate {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-height: 60px;
  max-height: 100%; /* added */
  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>