Css Rotated 90* Vertical Text Tabs Won't Center - Using Flexbox

I'm trying to have both tabs centered and take up half the vertical height. Any idea how to do this? If you notice, it appears the div holding 'Tab 1' and 'Tab 2' isn't taking on

Solution 1:

You are close, but there are two small issues here: 1) your .self-center class overrides your space-around alignment 2) you need to add display: flex to your .flex-column to make it a flexbox itself

Hope this helps.

codepen

Solution 2:

I have used the snippet of your earlier question and added the 2 tabs to it. On CSS side, i made the vertical-lr container also a flex box

/* update*/.post-side-tab-chosen {
flex:1;
background:gray;
padding: 1em0;
}
.post-side-tab {
flex:1;
background:tomato;
padding: 1em0;
}
/* end update */.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 {
  width300px;
  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
}

<divclass='flexbox-parent-console overflow-hidden'><divclass='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><divclass='bg-black-10 w25p flex  bg-light-gray'><divclass=' flex vertical-lr'><!-- updated html --><divclass='post-side-tab-chosen'>Tab 1</div><divclass='post-side-tab'>Tab 2</div><!-- end update --></div></div></div>