Box-sizing border-box doesn't work as needed

Question

Code: https://codepen.io/sshiling/pen/LqxLJg
In the first case, border-box works as needed.
In the second case, it doesn't and my input fields drop out of the form. When I remove padding for input fields they don't drop out. But I need padding for each of them.

.modal-search__input,
.modal-login__email,
.modal-login__password {
  font-size: 14px;
  line-height: 24px;
}

.modal-search__form {
  width: 345px;
  height: 85px;
  background-color: #f8f7f4;
  border-radius: 5px;
  box-sizing: border-box;
  padding: 0 10px;
}

.modal-search__input {
  margin: 19px 0;
  padding: 10px;
  border-radius: 5px;
  width: 100%;
  border: 1px solid #d3d3d2;
}

.modal-login__form {
  width: 275px;
  height: 215px;
  background-color: #f8f7f4;
  border-radius: 5px;
  box-sizing: border-box;
  padding: 10px;
  margin: 20px 0;
}

.modal-login__email,
.modal-login__password {
  padding: 10px;
  border-radius: 5px;
  width: 100%;
  border: 1px solid #d3d3d2;
}

<section class="modal modal-search visually-hidden">
      <form action="" class="modal-search__form">
        <p><input class="modal-search__input" type="search" name="q" placeholder="Search" id="modal-search__input-field"></p>
      </form>
    </section>

    <section class="modal modal-login visually-hidden">
      <form action="#" method="post" class="form modal-login__form">
        <p><input type="email" value="" placeholder="Email" class="modal-login__email" id="modal-login__email-field" required></p>
        <p><input class="modal-login__password" type="password" value="" placeholder="Password" id="modal-login__password-field" required></p>
        <button class="button modal-login__button">Login</button>
        <p><a class="modal-login__link" href="#">Forgot password?</a></p>
        <p><a class="modal-login__link" href="#">Registration</a></p>
      </form>
</section>

Answer 1

But why it so? In the first case, it works without border-box for input field and in the second case, it doesn't.

Because In the first case,The type of input box is search.Different types of input boxes result in

Answer 2

input with type search is getting the box-sizing: border-box by default, while other types don't. You have to specify the border box for other types.

.modal-search__input,
.modal-login__email,
.modal-login__password {
  font-size: 14px;
  line-height: 24px;
}

.modal-search__form {
  width: 345px;
  height: 85px;
  background-color: #f8f7f4;
  border-radius: 5px;
  box-sizing: border-box;
  padding: 0 10px;
}

.modal-search__input {
  margin: 19px 0;
  padding: 10px;
  border-radius: 5px;
  width: 100%;
  border: 1px solid #d3d3d2;
}

.modal-login__form {
  width: 275px;
  height: 215px;
  background-color: #f8f7f4;
  border-radius: 5px;
  box-sizing: border-box;
  padding: 10px;
  margin: 20px 0;
}

.modal-login__email,
.modal-login__password {
  padding: 10px;
  border-radius: 5px;
  width: 100%;
  border: 1px solid #d3d3d2;
  box-sizing: border-box;
}

<section class="modal modal-search visually-hidden">
  <form action="" class="modal-search__form">
    <p><input class="modal-search__input" type="search" name="q" placeholder="Search" id="modal-search__input-field"></p>
  </form>
</section>

<section class="modal modal-login visually-hidden">
  <form action="#" method="post" class="form modal-login__form">
    <p><input type="email" value="" placeholder="Email" class="modal-login__email" id="modal-login__email-field" required></p>
    <p><input class="modal-login__password" type="password" value="" placeholder="Password" id="modal-login__password-field" required></p>
    <button class="button modal-login__button">Login</button>
    <p><a class="modal-login__link" href="#">Forgot password?</a></p>
    <p><a class="modal-login__link" href="#">Registration</a></p>
  </form>
</section>

Answer 3

Try this one I think this is use full for you first of all for you should have to give the height: auto; to .modal-login__form class your content will be not overflowing from the section and for box-sizing: border-box; its working in .modal-login__form class if you want to cover the email and password input you have to give the box-sizing: border-box; to .modal-login__email and .modal-login__password class.

.modal-search__input,
.modal-login__email,
.modal-login__password {
    font-size: 14px;
    line-height: 24px;
}
.modal-search__form {
    width: 345px;
    height: 85px;
    background-color: #f8f7f4;
    border-radius: 5px;
    box-sizing: border-box;
    padding: 0 10px;
}

.modal-search__input {
    margin: 19px 0;
    padding: 10px;
    border-radius: 5px;
    width: 100%;
    border: 1px solid #d3d3d2;
}

.modal-login__form {
    width: 275px;
    height: auto;
    background-color: #f8f7f4;
    border-radius: 5px;
    box-sizing: border-box;
    padding: 10px;
    margin: 20px 0;
}

.modal-login__email,
.modal-login__password {
    padding: 10px;
    border-radius: 5px;
    width: 100%;
    border: 1px solid #d3d3d2;
    box-sizing: border-box;
}

<section class="modal modal-search visually-hidden">
  <form action="" class="modal-search__form">
  <p><input class="modal-search__input" type="search" name="q" placeholder="Search" id="modal-search__input-field"></p>
    </form>
</section>

<section class="modal modal-login visually-hidden">
  <form action="#" method="post" class="form modal-login__form">
    <p><input type="email" value="" placeholder="Email"     class="modal-login__email" id="modal-login__email-field" required>   </p>
    <p><input class="modal-login__password" type="password" value="" placeholder="Password" id="modal-login__password-field" required></p>
    <button class="button modal-login__button">Login</button>
    <p><a class="modal-login__link" href="#">Forgot password</a></p>
    <p><a class="modal-login__link" href="#">Registration</a></p>
  </form>
</section>

Answer 4

You should give box-sizing style to modal-login__email and modal-login__password instead of modal-login__form

.modal-login__form {
    width: 275px;
    height: 215px;
    background-color: #f8f7f4;
    border-radius: 5px;
    padding: 10px;
    margin: 20px 0;
}

.modal-login__email,
.modal-login__password {
    padding: 10px;
    border-radius: 5px;
    width: 100%;
    border: 1px solid #d3d3d2;
  box-sizing: border-box;
}

Answer 5

use this

* {
  box-sizing: border-box;
}