html - How can I limit a table to fit inside 90% of my web page and no more? -

i have html:

<div style="display:table; width: 90%">    <div style="display: table-row;">      <div style="display: table-cell;"><textarea>abcdefg</textarea></div>      <div style="display: table-cell;"><textarea>hijklmn</textarea></div>    </div>    <div style="display: table-row;">      <div style="display: table-cell;"><textarea>abcdefg</textarea></div>      <div style="display: table-cell;"><textarea>hijklmn</textarea></div>    </div>  </div>

when textareas small fits inside 90%. when increase size of textareas dragging them goes beyond 90% of browser window , scroll bar appears @ bottom.

is there way can limit maximum of 90% , won't extend more without using library using css can coded modern browser.

using max-width stop table resizing if textareas resized enough table can still extend beyond it's 90% maximum, can stop behavior setting max-width text areas themselves

<div style="display:table; width: 90%; max-width: 90%">     <div style="display: table-row;">         <div style="display: table-cell;"><textarea style="max-width: 45vh;">abcdefg</textarea></div>         <div style="display: table-cell;"><textarea style="max-width: 45vh;">hijklmn</textarea></div>     </div>     <div style="display: table-row;">         <div style="display: table-cell;"><textarea style="max-width: 45vh;">abcdefg</textarea></div>         <div style="display: table-cell;"><textarea style="max-width: 45vh;">hijklmn</textarea></div>     </div> </div> 

this isn't graceful fix it's inline styles , it's use of vw (viewport width) units, should allow limit sizes need do, tweak further