外部溢出 div 不随比例调整大小

Question

我有一个固定大小的外部 div，它使用滚动来溢出。其中有一个比外部 div 大的内部 div。因此，可以通过滚动访问溢出。这无需像预期的那样缩放即可工作。

启用内部 div 的缩放，例如。 G。 0.7。内部 div 按预期缩小。但是，滚动并没有像我预期的那样减小。 div 周围有空间，我可以通过滚动查看。

我该如何解决这个问题？非常感谢。

.outer {
  overflow: scroll;
  width: 300px;
  height: 300px;
}

.inner {
  width: 1000px;
  height: 1000px;
  background-color: brown;
}

.inner-scaled {
  transform: scale(0.7);
  transform-origin: 0 0;
}

<p>
  When I do not scale, the whole outer div is filled with the inner div. Scrolling works as expected and the red element fills all the space in the scroll.
</p>

<div class="outer">
  <div class="inner"></div>
</div>

<p>
  When I scale down, I see that the inner red element is smaller, as I would expect. However, I would also expect, that the outer div scaling range adjusts to the new size. This does not seem to be the case, as a white space around the element within the
  scroll exists.
</p>

<b>How can I fix this to adjust the size?</b>

<div class="outer">
  <div class="inner inner-scaled"></div>
</div>

Answer 1

我不完全确定你的预期结果是什么，但你为什么不把规模放在outer 上？

我还将内部 div 的 width 设置为 100% 以便它与外部一起缩放，因为您似乎不允许水平滚动。

.outer {
  overflow: scroll;
  width: 300px;
  height: 300px;
}

.inner {
  width: 100%;
  height: 1000px;
  background-color: brown;
}

.outer-scaled {
  transform: scale(0.7);
  transform-origin: 0 0;
}

<p>
  When I do not scale, the whole outer div is filled with the inner div. Scrolling works as expected and the red element fills all the space in the scroll.
</p>

<div class="outer">
  <div class="inner"></div>
</div>

<p>
  When I scale down, I see that the inner red element is smaller, as I would expect. However, I would also expect, that the outer div scaling range adjusts to the new size. This does not seem to be the case, as a white space around the element within the
  scroll exists.
</p>

<b>How can I fix this to adjust the size?</b>

<div class="outer outer-scaled">
  <div class="inner"></div>
</div>

Answer 2

谢谢你们，通过另一个线程我找到了解决方案。我想要的是这样的：

.outer {
  overflow: scroll;
  width: 300px;
  height: 300px;
}

.intermediate{
    width: 702px;
    height: 702px;
    overflow: hidden;
}

.inner {
  width: 1000px;
  height: 1000px;
  background-color: brown;
}

.inner-scaled {
  border: dotted #ccc 2px;
  transform: scale(0.7);
  transform-origin: 0 0;
}

<b>Basically adding an intermediate div with overflow hidden does the trick. However, if the new scaling size is not known, a solution for the problem can involve javascript.</b>

<div class="outer">
 <div class="intermediate">
  <div class="inner inner-scaled"></div>
 </div>
</div>