1

Below I have two divs, one that grows to assume its child's height, and the other where, because of a css transform, the parent's height does not adjust. Does anyone know why the second div's height doesn't adjust, and if there is a solution to this problem that doesn't involve changing the height of the parent with javascript?

.container {
  background-color: blue;
  position: relative;
  margin-bottom: 200px;
}

.child {
  background-color: red;
  width:500px;
  height:100px;
  position: relative;
  left: 30%;
}

.b > .child {
  transform:  rotate(-90deg);
}
Container's height grows to fit child element:
<div class="container a">
  <div class="child"></div>
</div>

Container's height does not adjust to fit rotated element:
<div class="container b">
  <div class="child"></div>
</div>
user3692823
  • 341
  • 1
  • 11

1 Answers1

0

You changed with the rotate child element. And height and width will behavior different. Could you try this code, maybe it will help.

.b > .child {  transform:  rotate(-90deg);   width: 100px; }
ht13
  • 633
  • 7
  • 19