css 要素を画面外に溢れさせ、スクロールで表示させたい

Question

右下に要素を表示した時に、画面を右下から縮めていき、一定の大きさまで画面が小さくなったら、要素を画面外に残して溢れさせたいです。

例えば

<div class="window">

    <div class="rectangle">


    </div>

</div>

.window{
    .rectangle{
        position: absolute;
        bottom: 0px;
        right: 0px;
        border: solid 1px #4a4a4a;
        width: 20vw;
        height: 20vw;
        min-width: 200px;
        min-height: 200px;
    }
}

このようなコードでは、画面を右下から縮めていった時、いつまでもrectangleは画面の右下にくっついてしまいますが、一定の大きさまでwindowを小さくしたら、rectangleを置いけぼりにしたいです。

@media screen and (max-width:1024px) {
    .window{
        .rectangle{
            position: relative;
        }
    }
}

このようなスタイルを加えたら、rectangleを溢れさせるようにはできるんですが、右下に維持しつつ置いてけぼりにできるわけじゃないので、理想の動きにはなりません。
どのようにすればいいでしょうか。

-追記-
スクロールが効かないのはノーマライズのcssが原因でした。
申し訳ございません。
ただこれのどれが原因なのかはまだ分かりません。
↓
分かりました

/*! normalize.scss v0.1.0 | MIT License | based on git.io/normalize */

html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0;
    overflow: hidden; //これのせい
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
    display: block
}

audio,
canvas,
progress,
video {
    display: inline-block;
    vertical-align: baseline
}

audio:not([controls]) {
    display: none;
    height: 0
}

[hidden],
template {
    display: none
}

a {
    background-color: transparent;
    text-decoration: none
}

a:active,
a:hover {
    outline: 0
}

abbr[title] {
    border-bottom: 1px dotted
}

b,
strong {
    font-weight: bold
}

dfn {
    font-style: italic
}

h1 {
    font-size: 2em;
    margin: 0.67em 0
}

mark {
    background: #ff0;
    color: #000
}

small {
    font-size: 80%
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sup {
    top: -0.5em
}

sub {
    bottom: -0.25em
}

img {
    border: 0
}

svg:not(:root) {
    overflow: hidden
}

figure {
    margin: 1em 40px
}

hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0
}

pre {
    overflow: auto
}

code,
kbd,
pre,
samp {
    font-family: monospace, monospace;
    font-size: 1em
}

button,
input,
optgroup,
select,
textarea {
    color: inherit;
    font: inherit;
    margin: 0
}

button {
    overflow: visible
}

button,
select {
    text-transform: none
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer
}

button[disabled],
html input[disabled] {
    cursor: default
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0
}

input {
    line-height: normal
}

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box;
    padding: 0
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    height: auto
}

input[type="search"] {
    -webkit-appearance: textfield;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none
}

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em
}

legend {
    border: 0;
    padding: 0
}

textarea {
    overflow: auto
}

optgroup {
    font-weight: bold
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

td,
th {
    padding: 0
}

/*input type numberのスピンボタン消す*/

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

Answer 1

こういうことでしょうか？
https://jsfiddle.net/pcwudrmc/50061/

$mw: 500px !default;
@media screen and (max-width: ($mw)) {
  .window{
    .rectangle{
      left: calc(#{$mw} - 20vw);
    }
  }
}

$mh: 500px !default;
@media screen and (max-height: ($mh)) {
  .window {
    .rectangle {
      top: calc(#{$mh} - 20vw);
    }
  }
}

スクロールバーが出ちゃうのではみ出すときにガタつきますが。
SCSSに慣れてないので書き方はイマイチかもしれませんがご容赦ください。

Comments

[退会済みユーザー]

丁寧に回答くださったのに返事が遅れてしまい、大変申し訳ございません。
やりたかった動きになってます。
ただ他の所にも応用したいので、コードの理解をしたいのですが少し難しいです....。
まず、変数$mwと$mhにはおいてけぼりを発動したい時のウィンドウの横幅と縦幅をそれぞれ入れるのでしょうか。

[退会済みユーザー]

あとJsFiddleでは画面のスクロールが効くのに効かないです...

[退会済みユーザー]

ノーマライズのcssが原因でした、すみません

[退会済みユーザー]

理屈もなんとなく分かって来ました。

(画面の高さ - 溢れさせたい要素の高さ) をtopにすることで、下方向に溢れさせてるのですね。
すごいです。