css - 即使内容更小，HTML 仍然会溢出

Question

我在使用 CSS Scaled <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> 的 child , <img>和 <canvas>没有font-size属性，仅包含 width s 和 height s 根据比例因子而变化。

这是一个 demo我的问题。

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>