vertical text in flexbox layout - css

Question

I have a front page layout for my portfolio that Im trying to implement some vertical text on. The right section (blue) is where my name will be written vertically. When I try to rotate the text via css transform, it screws up the layout when scrolling. So Im stumped. Youll have to increase the size to full page to view the layout correctly. Name should extend full length of the blue container.
https://codepen.io/marti2221/pen/BdrdZJ
<div class="container">
<div class="left">
<div class="svg-container">
<div class="svg-logo"></div>
</div>
<div class="question-container">
<p>WHO AM I?</p>
<p>WHAT DO I DO?</p>
</div>
</div>
<div class="middle">
<div class="top">
<nav>
<a>Link1</a>
<a>Link2</a>
<a>Link3</a>
<a>Link4</a>
</nav>
</div>
<div class="bottom">
<h1>Im an extremely</br> passionate User</br> Interface Design</br> +
Developer</h1>
</div>
</div>
<div class="right">
<h1></h1>
</div>
</div>
.container{
display: flex;
height: 100vh;
background: black;
}
.left{
display: flex;
flex: 1;
background: gray;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.svg-container{
display: flex;
flex-grow: 1;
background: yellow;
width: 100%;
justify-content: center;
}
.svg-logo{
height: 100px;
width: 200px;
background: orange;
}
.question-container{
display: flex;
flex-grow: 1;
background: green;
width: 100%;
flex-direction: column;
justify-content: flex-end;
align-items: flex-end;
}
p{
display: flex;
margin-right: 10px;
}
.middle{
display: flex;
flex: 3;
background: red;
flex-direction: column;
}
.top{
display: flex;
flex: 1;
background: aqua;
}
nav{
display: flex;
flex-direction: column;
margin: 65px 0 0 65px;
}
a:before {
content: '\2014';
position: absolute;
margin-left: -40px;
}
a{
margin: 10px 0 10px 0;
font-size: 24px;
}
.bottom{
display: inline-flex;
flex: 1;
background: brown;
align-items: flex-start;
}
h1{
margin-left: 25px;
font-size: 55px;
}
.right{
display: flex;
flex: .5;
background: blue;
}
.name{
transform: rotate(90deg);
}

Answer 1

sideways-lr alone (without transform) will solve it, though as of today only Firefox support it.
Use writing-mode: vertical-lr; in combination with transform: rotate and it will behave more as you expect
Updated codepen
Stack snippet
.container{
display: flex;
height: 100vh;
background: black;
}
.left{
display: flex;
flex: 1;
background: gray;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.svg-container{
display: flex;
flex-grow: 1;
background: yellow;
width: 100%;
justify-content: center;
}
.svg-logo{
height: 100px;
width: 200px;
background: orange;
}
.question-container{
display: flex;
flex-grow: 1;
background: green;
width: 100%;
flex-direction: column;
justify-content: flex-end;
align-items: flex-end;
}
p{
display: flex;
margin-right: 10px;
}
.middle{
display: flex;
flex: 3;
background: red;
flex-direction: column;
}
.top{
display: flex;
flex: 1;
background: aqua;
}
nav{
display: flex;
flex-direction: column;
margin: 65px 0 0 65px;
}
a:before {
content: '\2014';
position: absolute;
margin-left: -40px;
}
a{
margin: 10px 0 10px 0;
font-size: 24px;
}
.bottom{
display: inline-flex;
flex: 1;
background: brown;
align-items: flex-start;
}
h1{
margin-left: 25px;
font-size: 55px;
}
.right{
display: flex;
flex: .2;
background: blue;
flex-direction: column;
justify-content: center;
}
.name{
display: flex;
transform: rotate(-180deg); /* changed */
background: pink;
writing-mode: tb-lr; /* for IE */
writing-mode: vertical-lr; /* added */
}
<div class="container">
<div class="left">
<div class="svg-container">
<div class="svg-logo"></div>
</div>
<div class="question-container">
<p>WHO AM I?</p>
<p>WHAT DO I DO?</p>
</div>
</div>
<div class="middle">
<div class="top">
<nav>
<a>Link1</a>
<a>Link2</a>
<a>Link3</a>
<a>Link4</a>
</nav>
</div>
<div class="bottom">
<h1>Im an extremely</br> passionate User</br> Interface Design</br> + Developer</h1>
</div>
</div>
<div class="right">
<h2 class="name">Travis Martin</h2>
</div>
</div>