Div class min-width still resizing - html

Question

Good day, so i have a login function encased in a div tag. I would just like to freeze the div if i resize. I tried adding min-width and display: inline-block but its still resizing. Any help would be appreciated. Also, using a pixel value still wont work.
the screenshot shows that min-width:300% !important; did not work.
I also placed my code in JS Fiddle: https://jsfiddle.net/wvhgsek9/
HTML:
<form class="reg_log_box login_box form-group">
<br>
<div class="row">
<div class="col-md-12">
<p>EMAIL</p>
<input type="text" placeholder="EMAIL" autocomplete="off" name="email"
value="<?php
if(isset($_POST["email"])) {
echo($_POST["email"]);
} ?>">
</div>
<div class="col-md-12">
<p>PASSWORD</p>
<input type="text" placeholder="PASSWORD" autocomplete="off" name="password">
</div>
</div>
<input type="submit" id="login" name="login" value="LOGIN" class="reg_signup">
<p class="center_font">NO ACCOUNT YET? REGISTER HERE</p>
<br>
</form>
CSS:
.login_box {
min-width: 30% !important;
display: inline-block
}
.reg_log_box {
width: 50%;
padding: 10px 70px 10px;
background: #fff;
opacity: 0.9;
border-radius: 30px;
margin: 0 auto;
}

Answer 1

Using
.login_box {
min-width: 30% !important;
display: inline-block
}
Is not going to work because that will mean to resize the box always to 30% of what ever the browser window's width is.
Instead, supply a pixel based value e.g.
.login_box {
min-width: 300px;
}
Edit:
To fully stop resizing completely then change your width to a pixel based value.
.reg_log_box {
width: 500px;
padding: 10px 70px 10px;
background: #fff;
opacity: 0.9;
border-radius: 30px;
margin: 0 auto;
}
You can then remove .login_box css all together...

Answer 2

try resize: block;
block
The element displays a mechanism for allowing the user to resize it in the block direction (either horizontally or vertically, depending on the writing-mode and direction value).
https://developer.mozilla.org/en-US/docs/Web/CSS/resize