Vertically stacking transformed text using Sass CSS and FlexBox - html

Question

Using FlexBox and Sass, I am trying to create stacked vertical bars as shown in the images pasted below. What I am expecting is the vertical text to take up the one-columned row, creating a stacking effect. What is happening, though, is the text is overlapping.
The html mark up is like so:
<div class="container__row">
<div class="container__col-sm-12 container__col-md-6 container__col-md-6">
<h1>Another section</h1>
</div>
<div class="container__col-sm-12 container__col-md-6 container__col-md-6">
<div class=container__row>
<div class="container__col-sm-12 container__col-md-12 container__col-md-12 skills-bar">
Front-End Technologies
</div>
</div>
<div class=container__row>
<div class="container__col-sm-12 container__col-md-12 container__col-md-12 skills-bar">
Front-End Technologies
</div>
</div>
<div class=container__row>
<div class="container__col-sm-12 container__col-md-12 container__col-md-12 skills-bar">
Design
</div>
</div>
<div class=container__row>
<div class="container__col-sm-12 container__col-md-12 container__col-md-12 skills-bar">
GIS
</div>
</div>
</div>
<div class="container__row">
This is the Sass .scss code that makes up the css styling:
//site container with set max width
$grid__bp-md: 768;
$grid__bp-lg: 992;
$grid__cols: 12;
//sass map to define breakpoints
$map-grid-props: ('-sm':0, '-md': $grid__bp-md, '-lg' : $grid__bp-lg);
//mixin to dynamically create media query for each breakpoint
#mixin create-mq($breakpoint) {
#if($breakpoint == 0) {
#content;
} #else {
#media screen and (min-width: $breakpoint *1px) {
#content;
}
}
}
#mixin create-col-classes($modifier, $grid__cols, $breakpoint) {
#include create-mq($breakpoint) {
//class to set up columns for all screen sizes - mobile first
#for $i from 1 through $grid__cols {
&__col#{$modifier}-#{$i} {
flex-basis: (100 / ($grid__cols / $i)) * 1%;
}
}
}
}
.container {
max-width: $grid__bp-md * 1px;
margin: 0 auto;
//attribute to override max width
&--fluid {
margin: 0;
max-width: 100%;
}
//attribute to position row's child elements. remove overflow with wrap and 100% width for nesting
&__row {
display: flex;
flex-wrap: wrap;
width: 100%;
}
#each $modifier, $breakpoint in $map-grid-props {
#include create-col-classes($modifier, $grid__cols, $breakpoint);
}
}
p {
font-size: .85em;
color: #aaa;
}
}
.skills-bar {
transform: rotate(90deg);
transform-origin: left top 0;
float: left;
}
There is this strange overlap that happens. Can anyone suggest why the vertical text won't make rows?

Answer 1

If you look in the inspector, you can see that the original height of the container isn't being effected by the transform and that's why this is happening. I can't think of a way around it without measuring the new height after the transform with js.
I'm not sure what browsers you need to support, but text-orientation / writing-mode will do, mostly, what you need without js.
.skills-bar {
writing-mode: sideways-lr; // only supported in FF, use 'vertical-lr' for more support
text-orientation: upright;
float: left;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode
https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation

Answer 2

In order to measure the divs after the css transform, I used getBoundingClientRect().
With a few lines of jquery, I got what I needed:
$(document).ready(function(){
var skills = $(".skills-bar")
$.each(skills, function(i, div) {
console.log(div);
var dimensions = div.getBoundingClientRect();
console.log(dimensions);
$(this).css("width", dimensions.width).css("height", dimensions.height);
});
});