Выполнил все пункты, но динамика не работает
(Ineska знаю ты будешь это читать, спасибо что помогаешь разобраться)), подскажи в чем здесь ошибка). Пробовал в Хром и в Edge, в обоих ширина остается неизменной. Код прилагаю:
HTML
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Поля ввода с динамической шириной</title>
<base href="/assets/course113/">
<link href="style.css" rel="stylesheet">
<link href="course.css" rel="stylesheet">
</head>
<body class="subtle">
<div class="card">
<h1 class="card-title">Поля ввода с динамической шириной</h1>
<div class="input-container">
<input class="input">
<button class="add-on icon-start">Запустить</button>
<a href="#more">Подробнее</a>
</div>
<div class="input-container">
<span class="add-on">Количество</span>
<input class="input">
</div>
<div class="input-container">
<span class="add-on icon-search">Поиск</span>
<input class="input">
<button class="add-on button">Искать</button>
</div>
</div>
</body>
</html>
CSS
.input-container {
width: 200px;
margin: 30px 0;
outline: 2px dashed rgba(0, 128, 0, 0.2);
outline-offset: 5px;
display: flex;
}
.add-on {
display: inline-block;
min-width: 40px;
min-height: 36px;
padding: 8px 12px;
vertical-align: top;
color: #666666;
background-color: #eeeeee;
border: 2px solid #cccccc;
box-sizing: border-box;
flex-shrink: 0;
}
.input {
padding: 8px 12px;
border: 2px solid #cccccc;
flex-grow: 1;
min-width: 50px;
}
.input:not(:first-child) {
border-left: 0;
}
.input:not(:last-child) {
border-right: 0;
}
.input-container a {
margin: 0 10px;
font-size: 12px;
line-height: 36px;
color: #666666;
}
Спасибо
