Меняется ширина input в зависимости от количества input в form

Всем привет! Есть две формы (регистрация и авторизация). И в них inputы имеют одинаковое относительное значение ширины, но различные абсолютные значения. На оба контейнера и на сами inputы повешены одинаковые стили. Не понимаю зависимости, но обнаружил, что при добавлении ещё одного input в форму авторизации, их ширина становится такой же, как в форме регистрации. Форма авторизации Форма регистрации Что не так и как исправить?

CSS:

.container {
    background-color: #4d4d4d;
    width: 45%;
    margin: 0 auto;
    padding: 10px 0px;
    border-radius: 10px;
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 1.4em;
    color: darkgrey;
    text-align: center;
    opacity: 0.9;

    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0px 0px;
    flex: 1 0 0%;
}
.input__inLine {
    width: 97%;
    border: none;
    border-bottom: 2px solid #9e9e9e;
    outline: none;
    height: 22px;
    font-size: 0.9em;
    padding: 5px 10px;
}

HTML:

<div class="container container_shadow"><!--sign up form-->
    <?php if (isset($error)) : ?>
        <p><?=$error ?></p>
    <?php endif; ?>
    <h2>Вход на сайт</h2>
    <form action="#" method="post">
        <input class="input__inLine" type="login" name="login" placeholder="Логин" value="<?= isset($login) ? $login  : '' ?>" />
        <input class="input__inLine" type="password" name="password" placeholder="Пароль" value="<?= isset($password) ? $password  : '' ?>" />
        <input type="submit" name="submit" class="btn btn-default" value="Вход" />
    </form>
</div><!--/sign up form-->
<div class="container container_shadow"><!--registration  form-->
    <h2>Регистрация на сайте</h2>
    <form action="#" method="post">
        <input class="input__inLine" type="text" name="second_name" placeholder="Фамилия" value="<?= isset($second_name) ? $second_name : '' ?>"/>
        <input class="input__inLine" type="text" name="first_name" placeholder="Имя" value="<?= isset($first_name) ? $first_name  : '' ?>"/>
        <input class="input__inLine" type="text" name="patronymic" placeholder="Отчество" value="<?= isset($patronymic) ? $patronymic  : '' ?>"/>
        <input class="input__inLine" type="text" name="login" placeholder="Логин" value="<?= isset($login) ? $login  : '' ?>"/>
        <input class="input__inLine" type="password" name="password" placeholder="Пароль" value="<?= isset($password) ? $password  : '' ?>"/>
        <input name="role" type="radio" value="director">Руководитель
        <input name="role" type="radio" value="employee">Сотрудник
        <input type="submit" name="submit" value="Регистрация" class="btn btn-default"/>
    </form>
</div><!--/registration form-->

Обновление: решил, приписав форме свойство display: contents;


Ответы (0 шт):