Is there a pure CSS way to make an element using "resize" shrink when the window becomes s-CodePudding

I'm using resize: both; to make a resizable frame. I noticed when I scale the screen down the frame stays the same size triggering a horizontal scroll bar. I tried adding max-width: 98%; to the element and it stops me from dragging larger than 98% as expected, however it doesn't squish the frame down as I would like it to.

Here's a basic example

<section class="page">

    <article class="resizeFrame">
        <iframe class="iFrame"></iframe>
    </article>
 
</section>

<style>

    .page{
        display: grid;
        width: 100%;
        height: auto;
    }

    .resizeFrame{
        grid-area: 1/1/2/2;
        display: grid;
        place-self: center;
        autoflow: hidden;
        resize: both;
        box-sizing: border-box;
        border: 2px solid #000;
        width: 600px;
        max-width: 98%;
        height: 400px;
    }

    .iFrame{
        grid-area: 1/1/2/2;
        width: 100%;
        height: 100%;
        border: none;
        overflow: hidden;
    }

</style>

If you scale up the width of the .resizeFrame it stops at 98%. But if you shrink the width of the window the resizeFrame doesn't scale down with it maintaining the max-width: 98%;. Does anybody know of a way to make that happen with pure css? I know there's all sorts of approaches for doing it in Javascript but I'd rather not if there's a css way.

CodePudding user response：

Have you tried max-width: 98vw;

I have updated above code.

body {
  margin: 0;
  padding: 0;
} 
.page{
    display: grid;
    width: 100%;
    height: auto;
    margin: 8px 0;
}

.resizeFrame{
   grid-area: 1/1/2/2;
   display: grid;
   place-self: center;
   overflow: hidden;
   resize: both;
   box-sizing: border-box;
   border: 2px solid #000;
   width: 600px;
   max-width: 98vw;
   height: 400px;
}

.iFrame{
   grid-area: 1/1/2/2;
   width: 100%;
   height: 100%;
   border: none;
   overflow: hidden;
   }

<body>
    
    <section class="page">

        <article class="resizeFrame">
            <iframe class="iFrame"></iframe>
        </article>
     
    </section>
</body>

CodePudding user response：

Try this:

@media only screen and (max-width: 1600px){
    .resizeFrame{
        grid-area: 1/1/2/2;
        display: grid;
        place-self: center;
        autoflow: hidden;
        resize: both;
        box-sizing: border-box;
        border: 2px solid #000;
        width: 600px;
        max-width: 90%;
        height: 400px;
    }
}

@media only screen and (max-width: 1300px){
    .resizeFrame{
        grid-area: 1/1/2/2;
        display: grid;
        place-self: center;
        autoflow: hidden;
        resize: both;
        box-sizing: border-box;
        border: 2px solid #000;
        width: 600px;
        max-width: 90%;
        height: 400px;
    }
}

@media only screen and (max-width: 1000px){
    .resizeFrame{
        grid-area: 1/1/2/2;
        display: grid;
        place-self: center;
        autoflow: hidden;
        resize: both;
        box-sizing: border-box;
        border: 2px solid #000;
        width: 600px;
        max-width: 90%;
        height: 400px;
    }
}

@media only screen and (max-width: 700px){
    .resizeFrame{
        grid-area: 1/1/2/2;
        display: grid;
        place-self: center;
        autoflow: hidden;
        resize: both;
        box-sizing: border-box;
        border: 2px solid #000;
        width: 600px;
        max-width: 90%;
        height: 400px;
    }
}

@media only screen and (max-width: 400px){
    .resizeFrame{
        grid-area: 1/1/2/2;
        display: grid;
        place-self: center;
        autoflow: hidden;
        resize: both;
        box-sizing: border-box;
        border: 2px solid #000;
        width: 600px;
        max-width: 90%;
        height: 400px;
    }
}

@media only screen and (max-width: 100px){
    .resizeFrame{
        grid-area: 1/1/2/2;
        display: grid;
        place-self: center;
        autoflow: hidden;
        resize: both;
        box-sizing: border-box;
        border: 2px solid #000;
        width: 600px;
        max-width: 90%;
        height: 400px;
    }
}

I think this should work. Note: This will still depend on PC size, but in most cases, it will work.

Explanation: This CSS will update the size every 300px and set the % according to it.