仅从右上角调整 div 的大小

Question

So for my project I want to make my card elements smaller when reducing the screen size. However I can't figure out how to let the cards reduce in size correctly. I tried display:flex and flew-flow row wrap but nothing seems to work. So to be clear I want my divs to reduce from right to left Does anyone know how to fix this? Here is my code:

 .showcase { position: relative; height:35rem; overflow: hidden; margin-left:auto; margin-right:auto; max-width: 75rem; }.showcase_container { display: grid; grid-template-columns: repeat(3, 1fr); gap:1rem; width:75rem; }.showcase_item1 { height:15rem; width: 23rem; background-color: var(--color-showcase); border-radius: 3px; box-shadow: 3px 3px 5px 0px rgb(9 30 66 / 20%), 0px 0px 1px rgb(9 30 66 / 31%); }.showcase_item1 p { text-align: center; font-size:0.9rem; margin: 1.10rem 0; }.showcase_item1 h1 { text-align: center; font-size:1.3rem; }.arrow1 { position: relative; margin-top:1.8rem; margin-left: 19rem; }.showcase_item1:hover { background: white; transition: 200ms; cursor:pointer; }.showcase_item1:hover.arrow1 { display:flex; transition: 200ms ease-in; transform: translateX(40%); margin-right:1rem; }.showcase_item1:hover.hide { display: block; position: absolute; margin-top:0.9rem; margin-left:9rem; animation: type 1s steps(60, end) }.icondraft1 { position: relative; display:flex; justify-content: center; margin-top: 1rem; }.hide { display: none; }.showcase_item2 { height:15rem; width: 23rem; background-color: var(--color-showcase); border-radius: 3px; box-shadow: 3px 3px 5px 0px rgb(9 30 66 / 20%), 0px 0px 1px rgb(9 30 66 / 31%); }.showcase_item2 p { text-align: center; font-size:0.9rem; margin: 1.10rem 0; }.showcase_item2 h1 { text-align: center; font-size:1.3rem; }.arrow2 { position: relative; margin-top:1.8rem; margin-left: 19rem; }.showcase_item2:hover { background: white; transition:450ms; cursor:pointer; }.showcase_item2:hover.arrow2{ display:flex; transition: 200ms ease-in; transform: translateX(40%); margin-right:1rem; }.showcase_item2:hover.hide { display: block; position: absolute; margin-top:0.8rem; margin-left:9rem; }.icondraft2 { position:relative; display:flex; justify-content: center; margin-top: 1rem; }.showcase_item3 { height: 15rem; width: 23rem; background-color: var(--color-showcase); border-radius: 3px; box-shadow: 3px 3px 5px 0px rgb(9 30 66 / 20%), 0px 0px 1px rgb(9 30 66 / 31%); }.showcase_item3 p { text-align: center; font-size:0.9rem; margin: 1.10rem 0; }.showcase_item3 h1 { text-align: center; font-size:1.3rem; }.arrow3 { position: relative; margin-top:2.5rem; margin-left: 19rem; }.showcase_item3:hover { background: white; transition:450ms; cursor:pointer; }.showcase_item3:hover.arrow3{ display:flex; transition: 200ms ease-in; transform: translateX(40%); margin-right:1rem; }.showcase_item3:hover.hide { display: block; position: absolute; margin-top:1.5rem; margin-left:9rem; }.icondraft3 { position:relative; display:flex; justify-content: center; margin-top: 1rem; }.showcase_item4 { height: 15rem; width: 23rem; background-color: var(--color-showcase); border-radius: 3px; box-shadow: 3px 3px 5px 0px rgb(9 30 66 / 20%), 0px 0px 1px rgb(9 30 66 / 31%); }.showcase_item4 p { text-align: center; font-size:0.9rem; margin: 1.10rem 0; }.showcase_item4 h1 { text-align: center; font-size:1.3rem; margin: 0.6rem; }.arrow4 { position: relative; margin-top:1.5rem; margin-left: 19rem; }.showcase_item4:hover { background: white; transition:450ms; cursor:pointer; }.showcase_item4:hover.arrow4{ display:flex; transition: 200ms ease-in; transform: translateX(40%); margin-right:1rem; }.showcase_item4:hover.hide { display: block; position: absolute; margin-top:0.6rem; margin-left:9rem; }.icondraft4 { position:relative; display:flex; justify-content: center; margin-top: 1rem; }.showcase_item5 { height: 15rem; width: 23rem; background-color: var(--color-showcase); border-radius: 3px; box-shadow: 3px 3px 5px 0px rgb(9 30 66 / 20%), 0px 0px 1px rgb(9 30 66 / 31%); }.showcase_item5 p { text-align: center; font-size:0.9rem; margin: 1.10rem 0; }.showcase_item5 h1 { text-align: center; font-size:1.3rem; }.arrow5 { position: relative; margin-top:1rem; margin-left: 19rem; }.showcase_item5:hover { background: white; transition:450ms; cursor:pointer; }.showcase_item5:hover.arrow5{ display:flex; transition: 200ms ease-in; transform: translateX(40%); }.showcase_item5:hover.hide { display: block; position: absolute; margin-top:0.2rem; margin-left:9rem; }.icondraft5 { position:relative; display:flex; justify-content: center; margin-top: 0.5rem; }.showcase_item6 { height: 15rem; width: 23rem; background-color: var(--color-showcase); border-radius: 3px; box-shadow: 3px 3px 5px 0px rgb(9 30 66 / 20%), 0px 0px 1px rgb(9 30 66 / 31%); }.showcase_item6 p { text-align: center; font-size:0.9rem; margin: 1.10rem 0; }.showcase_item6 h1 { text-align: center; font-size:1.3rem; }.arrow6 { position: relative; margin-top:3rem; margin-left: 19rem; }.showcase_item6:hover { background: white; transition:450ms; cursor:pointer; }.showcase_item6:hover.arrow6{ display:flex; transition: 200ms ease-in; transform: translateX(40%); }.showcase_item6:hover.hide { display: block; position: absolute; margin-top:2.0rem; margin-left:9rem; }.icondraft6 { position:relative; display:flex; justify-content: center; margin-top: 0.5rem; } @media screen and (max-width: 1300px) {.showcase_container { grid-template-columns: repeat(2, 1fr); width:50rem; }.showcase { height:50rem; }.showcase_item1 { height:15rem; width: 21rem; }.showcase_item2 { height:15rem; width: 21rem; }.showcase_item3 { height:15rem; width: 21rem; }.showcase_item4 { height:15rem; width: 21rem; }.showcase_item5 { height:15rem; width: 21rem; }.showcase_item5 p { font-size:0.88rem; }.showcase_item6 { height:15rem; width: 21rem; } } @media screen and (max-width: 1201px) { } @media screen and (max-width: 1200px) {.startingbackground_div h1 { font-size:2.5rem; }.nav_menu { flex-grow: 2; margin-left:2rem; } } @media screen and (max-width: 1070px) {.startingbackground_div p { font-size: 0.93rem; }.startingbackground_div h1 { font-size: 2rem; } } @media screen and (max-width: 1000px) { } @media screen and (max-width: 890px) {.nav_menu { display:none; }.login_nav { display:none; }.hamburger { display:flex; }.nav_container { padding-left: 0.3rem; margin-left: auto; }.startingbackground_container { display:block; margin-top: 9rem; }.startingbackground_div p { font-size: 1.1rem; }.startingbackground_div h1 { font-size: 2.8rem; }.startingbackground { height: 90vh; }.solutions { margin-top: 2rem; }.header_left { }.showcase_container { display: block; }.showcase_item1 { width: 100%; display: flex; overflow:hidden; flex-flow: row wrap; } }

 <section class="showcase"> <div class="container showcase_container"> <div class="showcase_item1"> <a href="#" class="linkcard"><span class="icondraft1"><svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 32 32"><path style="line-height:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;white-space:normal;isolation:auto;mix-blend-mode:normal;" d="M19.01 1.52v.003H19l-6.33.475h-.037L12.62 2H5.5a.5.5 0 0 0-.5.5v.602l-1.07.152a.5.5 0 0 0-.424.564L5 14.23V27.5a.5.5 0 0 0.5.5h1.477l.08.56a.5.5 0 0 0.564.424l4.832-.693.422.48a.5.5 0 0 0.723.032l.826-.795.055-.008H25.5a.5.5 0 0 0.5-.5v-1.154l1.418-.203a.5.5 0 0 0.424-.565l-1.297-9.043c.096-.07.193-.14.283-.23l.277-.278c.336-.335.61-.714.79-1.109l1.255-2.764c.116-.255.17-.625-.103-.898a.657.657 0 0 0-.455-.195.952.952 0 0 0-.444.093L26 12.13V7.535a.5.5 0 0 0 0-.035v-.014c0-.011 0-.023-.002-.035l-.002-.015a.502.502 0 0 0-.017-.082l-.004-.014a.514.514 0 0 0-.014-.033l-.002-.002-.004-.012a.473.473 0 0 0-.016-.031l-.007-.014-.002-.004a.5.5 0 0 0-.047-.064l-.01-.012a.497.497 0 0 0-.02-.022l-5-5A.5.5 0 0 0 20.5 2H20.154l-.9-.432a.5.5 0 0 0-.244-.048zM6 3h14v4.5a.5.5 0 0 0.5.5H25v4.62a3.32 3.32 0 0 0-.627.484l-.826.824c-.02.02-.03.048-.049.07H7V15h15.516l-2.149 2H7v1h12.291l-2.148 2H7v1h9.068l-2.146 1.998H7V24h5.846l-1.932 1.797a.5.5 0 0 0-.035.695l.445.508H6V3zm15.707L24.293 7H21V3.707zM5 4.105V7.2l-.436-3.031L5 4.105zM7 8v1h9V8H7zm0 3v1h16.5v-1H7zm20.969 1.334-.987 2.17c-.118.26-.324.557-.584.816l-.277.278a1.131 1.131 0 0 1-.365.25l-1.358-1.358.682-.68a2.23 2.23 0 0 1.613-.443l2.276-1.033zm-4.256 2.92 1.23 1.23-9.998 9.63-1.361-1.434 10.129-9.426zM25 17.818V27h-9.531l3.113-3H24v-1.002h-4.377L21.697 21H23.5v-1h-.766L25 17.818zm1 1.955.781 5.452-.781.113v-5.565zm-13.148 5.588 1.375 1.446-.946.91-1.33-1.518.9-.838z" color="#000" enable-background="accumulate" font-family="sans-serif" font-weight="400" overflow="visible"/></svg></span> <h1>Draft</h1> <p>Use our in-browser contract drafting solution to<br>draft your contracts.</p> <div class="hide">Learn more</div><span><svg xmlns="http://www.w3.org/2000/svg" class="arrow1" width="32" height="32"><path d="M4 15a1 1 0 0 0 1 1h19.586l-4.292 4.292a1 1 0 0 0 1.414 1.414l6-6a.99.99 0 0 0.292-.702V15c0-.13-.026-.26-.078-.382a.99.99 0 0 0-.216-.324l-6-6a1 1 0 0 0-1.414 1.414L24.586 14H5a1 1 0 0 0-1 1z"/></svg></span> </div></a> <div class="showcase_item2"> <a><span class="icondraft2"><svg xmlns="http://www.w3.org/2000/svg" width="70" height="65" viewBox="0 0 62 60"><path d="M35 14.5c0-1.7-1.3-3-3-3-.5 0-.8-.4-.8-.8V3.8h-6.1V4c-.5 2.1-2.4 3.7-4.6 3.7-2.2 0-4.1-1.5-4.6-3.7v-.2H9.8v20.8c0.3.3.6.6.6h3.8c.5 0.8.4.8.8l.2 3.5 5.8-4.1c.1-.1.3-.1.5-.1h9.7v-6.8c0-.5.4-.8.8-.8 1.7-.2 3-1.5 3-3.2z"/><path d="m43 25.4 5.3 3.8.1-3.2c0-.5.4-.8.9-.8l4.3.1c.3 0.6-.3.6-.6V3.8h-6.8c-.5 0-.8-.4-.8-.8 0-1.7-1.4-3-3-3-1.7 0-3 1.3-3 3 0.5-.4.8-.8.8H33v6.1h.2c2.1.5 3.7 2.4 3.7 4.6 0 2.2-1.5 4.1-3.7 4.6H33v6.1h9.7s.2.1.3.2zM15.1 49.2C7 49.2.4 55.2.4 62.7v.8c0.3.2.5.5.5h28.4c.3 0.5-.2.5-.5v-.8c0-7.4-6.6-13.5-14.7-13.5zm6.8-10.6c0-3.7-3.1-6.8-6.8-6.8-3.7 0-6.8 3-6.8 6.8 0 3.7 3 6.8 6.8 6.8 3.7 0 6.8-3.1 6.8-6.8zm27 10.6c-8.1 0-14.7 6-14.7 13.5v.8c0.3.2.5.5.5h28.4c.3 0.5-.2.5-.5v-.8c0-7.4-6.6-13.5-14.7-13.5zm0-17.4c-3.8 0-6.8 3-6.8 6.8 0 3.7 3.1 6.8 6.8 6.8 3.7 0 6.8-3.1 6.8-6.8 0-3.8-3.1-6.8-6.8-6.8z"/></svg></span> <h1>Negotiations</h1> <p>Comment and make suggestions in contracts<br>using our in-browser negotiating solution.</p> <div class="hide">Learn more</div><span><svg xmlns="http://www.w3.org/2000/svg" class="arrow2" width="32" height="32"><path d="M4 15a1 1 0 0 0 1 1h19.586l-4.292 4.292a1 1 0 0 0 1.414 1.414l6-6a.99.99 0 0 0.292-.702V15c0-.13-.026-.26-.078-.382a.99.99 0 0 0-.216-.324l-6-6a1 1 0 0 0-1.414 1.414L24.586 14H5a1 1 0 0 0-1 1z"/></svg></span> </div></a> <div class="showcase_item3"> <a><span class="icondraft3"><svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 256.001 256.001"><rect width="256" height="256" fill="none"/><line x1="128.001" x2="128.001" y1="108" y2="216" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="128.001" x2="128.001" y1="40" y2="68" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><circle cx="128.001" cy="88" r="20" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="200.001" x2="200.002" y1="188" y2="216" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="200.002" x2="200.001" y1="40" y2="148" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><circle cx="200.001" cy="168" r="20" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="56.001" x2="56" y1="156" y2="216" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="56" x2="56.001" y1="40" y2="116" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><circle cx="56.001" cy="136" r="20" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg></span> <h1>CPQ</h1> <p>Configure price quotes easily by using our<br>integrated solution. </p> <div class="hide">Learn more</div><span><svg xmlns="http://www.w3.org/2000/svg" class="arrow3" width="32" height="32"><path d="M4 15a1 1 0 0 0 1 1h19.586l-4.292 4.292a1 1 0 0 0 1.414 1.414l6-6a.99.99 0 0 0.292-.702V15c0-.13-.026-.26-.078-.382a.99.99 0 0 0-.216-.324l-6-6a1 1 0 0 0-1.414 1.414L24.586 14H5a1 1 0 0 0-1 1z"/></svg></span> </div></a> <div class="showcase_item4"> <a><span class="icondraft4"><svg xmlns="http://www.w3.org/2000/svg" width="87" height="55" viewBox="0 0 256 256"><path d="M180.9 255.9H31.3c-7.9 0-14.3-6.4-14.3-14.3V14.3C17 6.4 23.4 0 31.3 0h149.6c7.9 0 14.3 6.4 14.3 14.3v79.5c0 1.4-1.1 2.5-2.5 2.5s-2.5-1.1-2.5-2.5V14.3c0-5.2-4.2-9.4-9.4-9.4H31.3c-5.2 0-9.4 4.2-9.4 9.4v227.2c0 5.2 4.2 9.4 9.4 9.4h149.6c5.2 0 9.4-4.2 9.4-9.4v-55.8c0-1.4 1.1-2.5 2.5-2.5s2.5 1.1 2.5 2.5v55.8c0 8-6.5 14.4-14.4 14.4z"/><path d="M167.5 34.3H42.7c-1.4 0-2.5-1.1-2.5-2.5s1.1-2.5 2.5-2.5h124.8c1.4 0 2.5 1.1 2.5 2.5s-1.2 2.5-2.5 2.5zm1 30.9H43.7c-1.4 0-2.5-1.1-2.5-2.5s1.1-2.5 2.5-2.5h124.8c1.4 0 2.5 1.1 2.5 2.5s-1.1 2.5-2.5 2.5zm-1 38.3H42.7c-1.4 0-2.5-1.1-2.5-2.5s1.1-2.5 2.5-2.5h124.8c1.4 0 2.5 1.1 2.5 2.5s-1.2 2.5-2.5 2.5zm0 38.3H42.7c-1.4 0-2.5-1.1-2.5-2.5s1.1-2.5 2.5-2.5h124.8c1.4 0 2.5 1.1 2.5 2.5s-1.2 2.5-2.5 2.5zm-8.3 38.3H42.6c-1.4 0-2.5-1.1-2.5-2.5s1.1-2.5 2.5-2.5h116.5c1.4 0 2.5 1.1 2.5 2.5s-1.1 2.5-2.4 2.5zM78 239.7H54.4c-7.8 0-14.2-6.4-14.2-14.2v-5.3c0-7.8 6.4-14.2 14.2-14.2H78c7.8 0 14.2 6.4 14.2 14.2v5.3c0 7.8-6.4 14.2-14.2 14.2zm-23.6-28.8c-5.1 0-9.3 4.2-9.3 9.3v5.3c0 5.1 4.2 9.3 9.3 9.3H78c5.1 0 9.3-4.2 9.3-9.3v-5.3c0-5.1-4.2-9.3-9.3-9.3H54.4zm85.3 17.9c-.3 0-.7 0-1-.1-1.7-.3-3.3-1.3-4.2-2.8l-3.2-5c-.3-.5-.9-.6-1.1-.6-.2 0-.7 0-1.1.6l-3 4.5c-1.5 2.2-4.2 3.2-6.8 2.5-2.6-.7-4.4-2.9-4.5-5.6l-.6-12.1c0-.9-.7-1.1-1-1.2-.3-.1-1-.1-1.4.7l-7.4 14.4c-.6 1.2-2.1 1.7-3.3 1.1-1.2-.6-1.7-2.1-1.1-3.3l7.4-14.4c1.3-2.5 4-3.8 6.8-3.2 2.8.6 4.7 2.9 4.9 5.7l.6 12.1c0.8.7 1.1.9 1.2.3.1.9.2 1.4-.5l3-4.5c1.2-1.7 3.1-2.8 5.2-2.7 2.1 0 4 1.1 5.1 2.9l3.2 5c.3.4.7.5.9.6.2 0.6 0 1-.3l21.5-17c1.1-.8 2.6-.7 3.4.4.8 1.1.7 2.6-.4 3.4l-21.5 17c-1.7-2.4 1.2-3.7 1.2z"/><path d="M192.8 188.7c-.3 0-.7-.1-1-.2l-34-14.9c-.6-.3-1.1-.7-1.3-1.4-.2-.6-.2-1.3 0-1.9l38.9-88.7c3.2-7.3 11.7-10.6 19-7.4l12 5.3c3.5 1.6 6.3 4.4 7.7 8 1.4 3.6 1.3 7.5-.2 11.1L195 187.3c-.3.6-.7 1.1-1.4 1.3-.2 0-.5.1-.8.1zm-30.7-18.6 29.5 13 37.9-86.4c1-2.3 1.1-4.9.2-7.3-.9-2.4-2.7-4.2-5.1-5.3l-12-5.3c-4.8-2.1-10.5.1-12.6 4.9l-37.9 86.4z"/><path d="M229.2 86.7c-.3 0-.7-.1-1-.2-1.2-.5-1.8-2-1.3-3.2l3.2-7.3c.5-1.1.7-2.2.7-3.4 0-3.3-2-6.4-5-7.7-2.1-.9-4.3-1-6.4-.1-2.1.8-3.7 2.4-4.6 4.5l-3.2 7.3c-.5 1.2-2 1.8-3.2 1.3-1.2-.5-1.8-2-1.3-3.2l3.2-7.3c1.4-3.3 4-5.8 7.4-7.1 3.3-1.3 6.9-1.2 10.2.2 4.8 2.1 8 6.9 8 12.2 0 1.8-.4 3.6-1.1 5.3l-3.2 7.3c-.6.8-1.5 1.4-2.4 1.4zm-36.9 65.1c-1.7 0-3.4-.4-5-1.1-6.3-2.8-9.2-10.2-6.4-16.5l14.4-32.7c1.3-3.1 3.8-5.4 6.9-6.6 3.1-1.2 6.5-1.1 9.6.2 3.1 1.3 5.4 3.8 6.6 6.9 1.2 3.1 1.1 6.5-.2 9.6l-14.4 32.7c-1.3 3.1-3.8 5.4-6.9 6.6-1.6.6-3.1.9-4.6.9zM206.6 99c-.9 0-1.9.2-2.8.5-1.9.7-3.4 2.2-4.2 4l-14.4 32.7c-1.7 3.8.1 8.3 3.9 10 1.9.8 3.9.9 5.8.1 1.9-.7 3.4-2.2 4.2-4l14.4-32.7c.8-1.9.9-3.9.1-5.8-.7-1.9-2.2-3.4-4-4.2-.9-.4-1.9-.6-3-.6zm-44.7 113.5c-.3 0-.7-.1-1-.2-.8-.4-1.4-1.1-1.5-2l-3.3-39.3c-.1-.9.3-1.7 1-2.2.7-.5 1.6-.6 2.4-.2l34.4 15.1c.8.3 1.3 1.1 1.4 1.9.1.9-.2 1.7-.9 2.2l-31 24.2c-.5.3-1.5-1.5.5zm-.5-37.8 2.6 30.7 24.3-18.9-26.9-11.8z"/></svg></span> <h1>eSignatures</h1> <p>Use our eSignature tool to get your documents<br>signed.</p> <div class="hide">Learn more</div><span><svg xmlns="http://www.w3.org/2000/svg" class="arrow4" width="32" height="32"><path d="M4 15a1 1 0 0 0 1 1h19.586l-4.292 4.292a1 1 0 0 0 1.414 1.414l6-6a.99.99 0 0 0.292-.702V15c0-.13-.026-.26-.078-.382a.99.99 0 0 0-.216-.324l-6-6a1 1 0 0 0-1.414 1.414L24.586 14H5a1 1 0 0 0-1 1z"/></svg></span> </div></a> <div class="showcase_item5"> <a><span class="icondraft5"><svg xmlns="http://www.w3.org/2000/svg" width="50" height="60" viewBox="0 0 64 64"><path fill="#231f20" d="M53.987,49.063c0-.022.013-.041.013-.063V5a3,3,0,0,0-3-3H13a3,3,0,0,0-3,3V59a3,3,0,0,0,3,3H41a1.005,1.005,0,0,0,.707-.293l12-12a1,1,0,0,0,.2-.293c.014-.031.022-.062.033-.094A.945.945,0,0,0,53.987,49.063ZM12,59V5a1,1,0,0,1,1-1H51a1,1,0,0,1,1,1V48H43a3,3,0,0,0-3,3v9H13A1,1,0,0,1,12,59Zm30-.414V51a1,1,0,0,1,1-1h7.586Z"/><path fill="#231f20" d="M23 22H19a1 1 0 0 1-1-1 1 1 0 0 0-2 0 3 3 0 0 0 3 3h1v1a1 1 0 0 0 2 0V24h1a3 3 0 0 0 3-3V19a3 3 0 0 0-3-3H19a1 1 0 0 1-1-1V13a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1 1 1 0 0 0 2 0 3 3 0 0 0-3-3H22V9a1 1 0 0 0-2 0v1H19a3 3 0 0 0-3 3v2a3 3 0 0 0 3 3h4a1 1 0 0 1 1 1v2A1 1 0 0 1 23 22zM31 13H47a1 1 0 0 0 0-2H31a1 1 0 0 0 0 2zM31 21H47a1 1 0 0 0 0-2H31a1 1 0 0 0 0 2zM31 29H47a1 1 0 0 0 0-2H31a1 1 0 0 0 0 2zM17 37H47a1 1 0 0 0 0-2H17a1 1 0 0 0 0 2zM47 45a1 1 0 0 0 0-2H17a1 1 0 0 0 0 2z"/></svg></span> <h1>Auto-Invoicing</h1> <p>Use our powerful auto-invoicing solution in<br>combinations with our CPQ and eSginature tools to<br>always sent accurate invoices on time.</p> <div class="hide">Learn more</div><span><svg xmlns="http://www.w3.org/2000/svg" class="arrow5" width="32" height="32"><path d="M4 15a1 1 0 0 0 1 1h19.586l-4.292 4.292a1 1 0 0 0 1.414 1.414l6-6a.99.99 0 0 0.292-.702V15c0-.13-.026-.26-.078-.382a.99.99 0 0 0-.216-.324l-6-6a1 1 0 0 0-1.414 1.414L24.586 14H5a1 1 0 0 0-1 1z"/></svg></span> </div></a> <div class="showcase_item6"> <a><span class="icondraft6"><svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" width="45" height="49" viewBox="0 0 32 32"><path d="M27,16.589V7.50049a.48365.48365,0,0,0-.01306-.06561.45541.45541,0,0,0-.01215-.06116.49171.49171,0,0,0-.12-.22479l-.00128-.00244-7-7A.4919.4919,0,0,0,19.626.02509.46407.46407,0,0,0,19.56543.013.48088.48088,0,0,0,19.5,0H5.5A2.50263,2.50263,0,0,0,3,2.5v27A2.50263,2.50263,0,0,0,5.5,32H23.583a.47574.47574,0,0,0,.08374-.01691C23.77814,31.98773,23.88751,32,24,32a7.9969,7.9969,0,0,0,3-15.411ZM20,1.70709,25.29254,7H21.5A1.50164,1.50164,0,0,1,20,5.5ZM19.51263,7H7.5A.50065.50065,0,0,1,7,6.5v-2A.50065.50065,0,0,1,7.5,4H19V5.5A2.47615,2.47615,0,0,0,19.51263,7ZM5.5,31A1.50164,1.50164,0,0,1,4,29.5V2.5A1.50164,1.50164,0,0,1,5.5,1H19V3H7.5A1.50164,1.50164,0,0,0,6,4.5v2A1.50164,1.50164,0,0,0,7.5,8H26v8.26331A7.886,7.886,0,0,0,20.13562,17H12.5a.5.5,0,0,0,0,1h6.22626a7.99915,7.99915,0,0,0-2.463,4H12.5a.5.5,0,0,0,0,1h3.56946a7.75149,7.75149,0,0,0,.51953,4H12.5a.5.5,0,0,0,0,1h4.58246a8.05139,8.05139,0,0,0,3.05316,3ZM24,31a7,7,0,1,1,7-7A7.00818,7.00818,0,0,1,24,31Zm0-13a6,6,0,1,0,6,6A6.00656,6.00656,0,0,0,24,18Zm0,11a5,5,0,1,1,5-5A5.00589,5.00589,0,0,1,24,29Zm2.25-5.5h-.84192A1.45561,1.45561,0,0,0,24.5,22.58759V21.25a.5.5,0,0,0-1,0v1.3421a1.49652,1.49652,0,0,0,.31348,2.89618,1.55361,1.55361,0,0,0,.18945.01172,1.49554,1.49554,0,0,0,1.40936-1H26.25a.5.5,0,0,0,0-1Zm-1.94336.895A.50007.50007,0,1,1,23.999,23.5a.55371.55371,0,0,1,.06348.00391.50011.50011,0,0,1,.24414.89111Zm-14.168-14.24121-2.542,2.65186L6.83594,12.127a.50006.50006,0,1,0-.666.74609l1.12109,1a.50081.50081,0,0,0,.69434-.02686l2.876-3a.50041.50041,0,0,0-.72266-.69238Zm0,5-2.542,2.65186L6.83594,17.127a.50006.50006,0,1,0-.666.74609l1.12109,1a.50081.50081,0,0,0,.69434-.02686l2.876-3a.50041.50041,0,0,0-.72266-.69238Zm0,5-2.542,2.65186L6.83594,22.127a.50006.50006,0,1,0-.666.74609l1.12109,1a.50081.50081,0,0,0,.69434-.02686l2.876-3a.50041.50041,0,0,0-.72266-.69238Zm0,5-2.542,2.65186L6.83594,27.127a.50006.50006,0,1,0-.666.74609l1.12109,1a.50081.50081,0,0,0,.69434-.02686l2.876-3a.50041.50041,0,0,0-.72266-.69238ZM12.5,13h11a.5.5,0,0,0,0-1h-11a.5.5,0,0,0,0,1Z"/></svg></span> <h1>Kan-Ban-board</h1> <p>Our customizable Kan-Ban boards help you<br> keep track of deadlines and other</p> <div class="hide">Learn more</div><span><svg xmlns="http://www.w3.org/2000/svg" class="arrow6" width="32" height="32"><path d="M4 15a1 1 0 0 0 1 1h19.586l-4.292 4.292a1 1 0 0 0 1.414 1.414l6-6a.99.99 0 0 0.292-.702V15c0-.13-.026-.26-.078-.382a.99.99 0 0 0-.216-.324l-6-6a1 1 0 0 0-1.414 1.414L24.586 14H5a1 1 0 0 0-1 1z"/></svg></span> </div></a> </div> </section>

Answer 1

You can use the css resize property

 .resizable { resize: both; }.box50 { min-width: 50px; min-height: 50px; width: 50px; border: 1px solid #DDD; overflow: hidden; }

 <div class="box50 resizable"> Resize me </div>