HTML <div> 即使内容更小，仍然会溢出

Question

我在使用 CSS Scaled <div> 时遇到了一些困难。

我有一个外部 <div> 固定了 width 和 height，还有一个内部 <div> 应该顺其自然。问题是，即使我缩小内部 <div>（缩小到，比方说 0.3），外部 <div> 上的垂直 scroll-bar 仍然可见，这真的出乎意料（检查内部<div> 显示它比它的 parent) 小得多。我真的觉得外面的<div>应该没有scroll-bar除非里面的<div>溢出了

代码

<div class="outter">
<div class="inner">
    <p>Random</p>
    <div>Silly</div>
    <h2>Thing</h2>
</div>

.outter {
    overflow: auto;
    width: 300px;

    box-shadow: 0 0 2px #222;
}

.inner {
    font-size: 40px;
    transform-origin: top left;
    transform: scale(1.3);
    height: 200px;
}

我应该提一下，我有一个 <svg>、<img> 和 <canvas> 而不是内部 <div> 的 children 而没有 font-size 属性，只是 widths 和 heights 根据比例因子变化。

这是我的问题 demo。

Answer 1

这是您问题的解决方案

.outter {
    overflow: auto;
    width: 300px;
    box-shadow: 0 0 2px #222;
}

.inner {
    font-size: 40px;
    transform-origin: top left;
    transform: scale(0.3);
    height:200px;
}

只需从外部 class 移除高度属性并将其放入内部 class

Answer 2

你的身高溢出是由font-size:40px计算出来的。然后你 transform 它，但高度仍然与 40px 字体的高度相同。

这就是发生这种情况的原因。

Answer 3

添加一个内div并给出height.

.outter {
overflow: auto;
width: 300px;
height: 200px;
box-shadow: 0 0 2px #222;
}
.wrap {
height: 160px;
}
.inner {
font-size: 40px;
transform-origin: top left;
transform: scale(0.3);
}

<div class="outter">
<div class="wrap">
    <div class="inner">
        <p>Random</p>
        <div>Silly</div>
        <h2>Thing</h2>
    </div>
</div>
</div>

Answer 4

只需将 display:flex; 添加到 class .outter。以下两个示例：第一个具有正常内容和没有不会溢出的滚动条，第二个示例具有将溢出的内容，但现在具有垂直滚动条。在这两个示例中，css 是相同的！

正常内容

.outter {
  box-shadow:0 0 2px #222;
  display:flex;
  height:200px;
  overflow-y:auto;
  width:300px;
}

.inner {
  font-size:40px;
  transform-origin:top left;
  transform:scale(0.3);
  -webkit-transform:scale(0.3);
}

<div class="outter">
  <div class="inner"> 
    <div>Silly</div>
    <h2>Thing</h2>
    <p>Random</p>
    <div>Silly</div>
    <h2>Thing</h2>
    <p>Random</p>
  </div>
</div>

溢出内容

.outter {
  box-shadow:0 0 2px #222;
  display:flex;
  height:200px;
  overflow-y:auto;
  width:300px;
}

.inner {
  font-size:40px;
  transform-origin:top left;
  transform:scale(0.3);
  -webkit-transform:scale(0.3);
}

<div class="outter">
  <div class="inner"> 
    <div>Silly</div>
    <h2>Thing</h2>
    <p>Random</p>
    <div>Silly</div>
    <h2>Thing</h2>
    <p>Random</p>
    <div>Silly</div>
    <h2>Thing</h2>
    <p>Random</p>
  </div>
</div>

Answer 5

使用

position:absolute;

在外面div，

position:relative;

在内div

见working fiddle

我刚刚添加了上面提到的属性：不需要的滚动条消失了。

您可能想尝试取消注释 lorem ipsum 段落 - 我添加为注释 HTML，用于测试目的 - 以在需要时看到滚动条。

HTML <div> 即使内容更小，仍然会溢出

HTML <div> still overflows even if content is way smaller

css

css-transforms