bootstrap 4 auto width absolute position in display flex

Question

I have a div and set display to flex using bootstrap 4. then I add another div into it and set position to absolute and rotate it using transform. like this:


  
    
      title
    
    
      content

CSS:

.inner {
  background: #f1f1f1;
}

.title {
  transform: rotate(-90deg) !important;
  position: absolute;
  left: -20px;
  top: 43px;
  text-align: center;
  font-size: 12px;
  background-color: #000;
  width: auto;
}

I set width to auto to resize width of div with absolute position auto. but in action it doesn't work. How do can I fix this problem?

I need to this:

Edited DEMO:

Demo Here

user_11099895 · Answer

I thought it can be done with border-left instead of d-flex which makes more complicate when we compare both and both gives same output

My approach is give

content

a border-left which creates a black vertical rectangle and rotate a title with 270deg and make it center using top:50%; transform: translateY(-50%); but it's position should be absolute

.wrapper{
  padding-left: 1rem;
  border-left: 40px solid black;
  position: absolute;
}

.title{
  position: absolute;
  color: white;
  letter-spacing: 2px;
  font-size: 12px;
  left: -5%;
  top: 50%;
  transform: translateY(-50%) rotate(270deg);
}


  
      title
    
      content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content

Updated: Responsive Design Code

Since a height value of .content should be assigned as width to .title, a little bit of JavaScript is needed and added that in the code snippet below.(As far as I know, it's not possible through pure CSS).

let eleHeight = document.getElementById('content').offsetHeight;
let titleEle = document.getElementById('title');
titleEle.style.minWidth = eleHeight+"px";

.wrapper{
    padding: 4rem;
}

.inner{
    display: flex;
   position: relative;
}

.side-text{
    color: white;
    position: absolute;
    transform: rotate(90deg);
    transform-origin: top left;
}

.title{
    text-align: center;
    background-color: black;
  margin: auto; 
}

.content{
    padding-left: 1rem;
}


    
          
              title title title
          
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

user_5028715 · Answer

You don't need to use transform. Use flex-row with d-flex to achieve it.

.inner {
  background: #f1f1f1;
}

.title {
  background-color: #000;
}









  
    
      title
    
    
      content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content

Reference

Bootstrap - Flex

bootstrap 4 auto width absolute position in display flex

2 Answers