HTML <div>即使内容远远较小仍然会溢出问题

Question

我在使用CSS缩放的<div>上遇到了一些问题。

我有一个外部<div>，它具有固定的width和height，以及一个内部<div>，应该与流程一起运行。问题是，即使我缩小内部<div>（例如缩小到0.3），外部<div>上的垂直滚动条仍然可见，这真的很意外（检查内部<div>会发现它比其父级小得多）。我真的认为外部<div>不应该有滚动条，除非内部<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;
}

我需要提醒一下，我内部的 <div> 的子元素被替换为 <svg>、<img> 和 <canvas>，它们没有 font-size 属性，只有 width 和 height 属性，根据缩放因子改变。

这是我的问题的演示。

- Calin Toderas

---

请将问题中的代码放在这里！ - musefan

我将内部高度视为75像素。由于需要多次缩放内部内容，因此无法在外部div上使用overflow hidden。 - Calin Toderas

Answer 1

只需将display:flex;添加到类.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>

- Sebastian Brosch

---

在 Fiddle 中似乎可以工作，但在我的实际项目中却不行。我使用的不是 Silly、Random、Thing 元素，而是 <img>、<svg> 和 <canvas>，即使使用了 display: flex，仍然有一个垂直滚动条。 - Calin Toderas

你能否在你的示例中添加一些这些元素？ - Sebastian Brosch

Answer 2

这是您问题的解决方案

.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;
}

只需从外部类中删除高度属性并将其放到内部类中即可。

- Afzal Ahmad

Answer 3

使用

position:absolute;

在外部 div 上，和

。

position:relative;

在内部 div 上

---

请查看工作的fiddle

---

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

您可能想尝试并取消注释lorem ipsum段落 - 我添加为带注释的HTML，供测试目的使用 - 以查看在需要时出现滚动条。

- Manube

Answer 4

你的高度溢出是由于font-size:40px计算的。 然后你进行了transform，但高度仍然与40像素字体相同。

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

- Paran0a

---

如果我删除 font-size 属性会怎样？除了愚蠢、随机、事物元素之外，我还有一个 <img>、<svg> 和 <canvas>，它们只有固定的 width 和 height，这些尺寸会随着内部 <div> 的缩放而缩放。 - Calin Toderas

Answer 5

添加一个内部的 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>

- Felix A J