Outer overflow div does not adjust size with scale-CodePudding

I have an outer div with a fixed size that uses a scroll for overflow. In it there is an inner div which is larger than the outer div. Therefore the overflow can be accessed by scrolling. This works without scaling as one would expect.

With a scaling on the inner div enabled, e. g. 0.7. The inner div is scaled down as expected. However, the scroll does not decrease in size as I would expect. There is space around the div which I can see by scrolling.

How can I fix this? Thank you very much.

.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 >
  <div ></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 >
  <div ></div>
</div>

CodePudding user response：

I'm not entirely sure what your expected outcome is but why don't you put the scale on the outer?

I have also set the width of the inner div to 100% so it scales with the outer since you did not seem to allow horizontal scrolling.

.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 >
  <div ></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 >
  <div ></div>
</div>

CodePudding user response：

Thank you both, with the other thread I found a solution. What I wanted was this:

.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 >
 <div >
  <div ></div>
 </div>
</div>