CSS 90* rotated div can't center text (width limits rotation) - using flexbox

Question

So I'm trying to make a tab on the right like so in the image below:

I want the div on the right to be only 25px width, I'm using flexbox for div that holds that purple parameter list as well as the tab on the right.

When I set 25px for this flexbox, the div I rotate in there takes on the 25px width, so I can't center the "parameters" title. Please let me know how I should go about it, thank you!

Code, React JS File:

return (
    <div className='flexbox-parent-console overflow-hidden'>
        <div className='b--light-gray bw2 b--solid w275p bg-white pa2 fill-area-content'>
            <PostListArray />
        </div>
        <div className='bg-black-10 w25p self-center  bg-light-gray'>
            <div className='r90 rotateddiv'>
                Parameters
            </div>
        </div>
    </div>
)

CSS:

.flexbox-parent-console {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start; /* align items in Main Axis */
    align-items: stretch; /* align items in Cross Axis */
    align-content: stretch; /* Extra space in Cross Axis */
}
.self-center {
    -ms-flex-item-align: center;
    align-self: center
}
.overflow-hidden {
    overflow: hidden
}
.fill-area-content {
    overflow: auto;
}
.r90 {
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.rotateddiv {
    width 300px;
    height: 24px;
    text-align: center;
    background: green;
}
//Non Essentials
.b--light-gray {
    border-color: #eee
}
.bg-black-10 {
    background-color: rgba(0, 0, 0, .1)
}
.bw2 {
    border-width: .25rem
}
.b--solid {
    border-style: solid
}
.pa2 {
    padding: .5rem
}

Answer 1

You can also take a look at writing-mode

.vertical-lr {
  -webkit-writing-mode: vertical-lr;
  /* old Win safari */
  writing-mode: vertical-lr;
  writing-mode: tb-lr;
  /* actually 
  writing-mode:sideways-lr; would be the one , but not avalaible everywhere so, let's transform */
  transform: scale(-1, -1);
  background: green;
  text-align: center;
  width: 1.5em;
  line-height: 1.5em;
  font-weight: bold;
  font-variant: small-caps;
}

.flex {
  display: flex;
}
/* did you mean  this ? */

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0.5em;
}

.fill-area-content {
  overflow: auto;
  flex: 1;
  height: 100%;
}

/* your code */
.flexbox-parent-console {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  /* align items in Main Axis */
  align-items: stretch;
  /* align items in Cross Axis */
  align-content: stretch;
  /* Extra space in Cross Axis */
}

.self-center {}

.overflow-hidden {
  overflow: hidden
}

.rotateddiv {
  width 300px;
  height: 24px;
  text-align: center;
  background: green;
}

.b--light-gray {
  border-color: #eee
}

.bg-black-10 {
  background-color: rgba(0, 0, 0, .1)
}

.bw2 {
  border-width: .25rem
}

.b--solid {
  border-style: solid
}

.pa2 {
  padding: .5rem
}

<div class='flexbox-parent-console overflow-hidden'>
  <div class='b--light-gray bw2 b--solid w275p bg-white pa2 fill-area-content'>
    <ul>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ul>
  </div>
  <div class='bg-black-10 w25p flex  bg-light-gray'>
    <div class=' vertical-lr'>
      Parameters
    </div>
  </div>
</div>

Answer 2

This is the best I can do to help you.

You can update the .post-list-section min-height CSS value (or add content on it) to see the position update

The solution is to add a controlled width to your rotating element (even if this have no visual effect) and translate from half of this size before rotating your element.

.flexbox-parent-console {
  display: flex;
  overflow: hidden;
  width: 100%;
  position: relative;
  background: #EEE;
}
.post-list-section {
  min-height: 300px;
  width: calc(100% - 1.5em);
  background: #ABB;
}
.nav-section {
  margin: auto 0; 
  width: 1.5em;
  line-height: 1.5em;
  height: 100%;
}
.nav-section > div {
    width: calc(200px + 1.5em);
    margin: 0;
    text-align: center;
    transform-origin: 50% 50%;
    transform: translateX(-100px) rotate(90deg);
    position: relative;
}

     <div class='flexbox-parent-console overflow-hidden'>
        <div class='post-list-section'>
            Post list
        </div>
        <div class='nav-section'>
            <div>
                Parameters
            </div>
        </div>
    </div>