Меняется ширина 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;