Whenever I rotate text (or a div containing text), it seems to break free from its parent container. Additionally, the height of the div appears to be based on its original width after rotation. I prefer using CSS to achieve the desired outcome rather than resorting to javascript or jQuery, even though those options are available since I'm working with Bootstrap-4. How can I ensure that a rotated div remains within its parent container and adjusts its dimensions based on the parent's width/height after a 90° rotation?
Appreciate any insights!
.emptydropzone{
height: 10vh;
border: 1vh dashed #000;
border-radius: 1vh;
background-color: #CCC;
}
.taflag{
width: 98%;
min-height: 50px;
margin: 10px 125px 10px 5px;
padding: 10px 10px 10px 10px;
border: 5px solid #90C;
border-radius: 5px;
background-color: #90C;
color: #FFF;
font-size:xx-large;
font-weight: bolder;
}
.rotateparent {
position:absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: yellow; /* this is just to see the parent div in testing */
}
.agentflag{
transform: rotate(-90deg);
border: 5px solid #F00;
border-radius: 5px;
background-color: #F00;
color: #FFF;
font-size:xx-large;
font-weight: bolder;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<body>
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-2">
<div class="taflag"> TA </div>
</div>
<div class="col-10">
<div class="emptydropzone" id="ta" > </div>
</div>
</div>
<div class="row">
<div class="col-2">
<div class="rotateparent">
<div class="agentflag"> AGENTS </div>
</div>
</div>
<div class="col-10">
<div class="emptydropzone" id="agent1"> </div>
<div class="emptydropzone" id="agent2"> </div>
<div class="emptydropzone" id="agent3"> </div>
<div class="emptydropzone" id="agent4"> </div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>