Div-класс минимальной ширины все еще изменения размера

Question

Добрый день, поэтому у меня есть функция входа, заключенная в тег div.Я просто хотел бы заморозить div, если я изменю размеры.Я попытался добавить min-width и display: inline-block, но его размер все еще изменился.Любая помощь будет оценена.Кроме того, использование значения в пикселях по-прежнему не работает.

На снимке экрана показано, что min-width: 300%! Important;не работал.

Я также поместил свой код в 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? <a href="register.php">REGISTER HERE</a></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

try resize: block;

block Этот элемент отображает механизм, позволяющий пользователю изменять его размер в направлении блока (по горизонтали или по вертикали, в зависимости от режима записи и значения направления).

https://developer.mozilla.org/en-US/docs/Web/CSS/resize

Answer 2

Использование

.login_box {
  min-width: 30% !important;
  display: inline-block
}

Не сработает, потому что это будет означать, что размер окна всегда будет изменяться до 30% от ширины окна браузера.

Вместо этого укажите пиксельна основе значения, например

.login_box {
  min-width: 300px;
}

Редактировать:

Чтобы полностью прекратить изменение размера полностью, измените ширину на значение в пикселях.

.reg_log_box {
  width: 500px;
  padding: 10px 70px 10px;
  background: #fff;
  opacity: 0.9;
  border-radius: 30px;
  margin: 0 auto;
}

Затем можно удалить .login_box css все вместе ...