包含元素不会增长以适合旋转的子元素[重复]

Question

下面我有两个 div，一个增长到假设它的孩子的高度，另一个因为 css 转换，父母的高度没有调整。有谁知道为什么第二个 div 的高度没有调整，是否有解决这个问题的方法不涉及使用 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>

Answer 1

您使用旋转子元素进行了更改。高度和宽度的行为会有所不同。 你能试试这个代码，也许它会有所帮助。

.b > .child {  transform:  rotate(-90deg);   width: 100px; }