CODEWITHSUNDEEP
javascripthtmlcssflexbox
Snorlax
Snorlax

Reputation: 4755

90 degree flipped vertical responsive div

I am attempting to have an inner div be responsive to a parent div so that if the parent div resizes, the inner div will also resize. I managed to flip the contents in the parent div, but after experimenting with a few things, I wasn't able to come with an adequate result.

What I'm trying to accomplish: -Inner div is 100% height of parent div.
-Inner div's height is responsive to parent div's height.
-Inner div is 90 degree flipped.
-Inner div sticks to the left side of the parent div.

My jsfiddle: https://jsfiddle.net/4obd6ye3/

.ok{
  width:100px;
  height:500px;
  display:flex;
  flex-direction:column;
  border:1px solid black;
  position:relative;
  float:left;
}
.heh{
  float:left;
  position: absolute;
  top: 0px;
  left: 100%;
  transform-origin: left bottom;
  transform: rotate(-90deg);
  border:1px solid green;
/*   height:100%;
  width:100%; */
}

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}
<div class="ok">
  <div class="heh">
  hey
 </div>
</div>

Upvotes: 0

Views: 56

Answers (1)

catbadger
catbadger

Reputation: 1822

You'll need JavaScript to maintain 100% height through resizing the bounding box. My example uses jQuery: CSS:

.ok{
  width:100px;
  height:500px;
  display:flex;
  flex-direction:column;
  border:1px solid black;
  position:relative;
  float:left;
}
.heh{
  float:left;
  position: absolute;
  bottom: 0px;
  left: 100%;
  transform-origin: left bottom;
  transform: rotate(-90deg);
  border:1px solid green;
/*   height:100%;
  width:100%; */
}

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

JS:

$(document).ready(function(){
    var h1 = $('.ok').height();
  $('.heh').width(h1);
})

Upvotes: 1

Related Questions