Что нужно сделать, чтобы второй flex блок занимал всю оставшуюся ширину?

Question

Что нужно сделать, чтобы второй flex блок занимал всю оставшуюся ширину? Без использования width второго блока

.hello {
    background-color: rebeccapurple;
}

.bye {
    background-color: aqua;
}

.box {
    display: flex;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>Title</title>
</head>
<body>
    <div class="box">
        <div class="hello">
            hello
        </div>
        <div class="bye">
            bye
        </div>
    </div>
</body>
</html>

вот нужный результат:

Answer 1

.hello {
  background-color: rebeccapurple;
}

.bye {
  background-color: aqua;
  flex: 1 0 0px;
}

.box {
  display: flex;
}

<div class="box">
  <div class="hello">hello</div>
  <div class="bye">bye</div>
</div>

БЛОГ НА HUSL

Что нужно сделать, чтобы второй flex блок занимал всю оставшуюся ширину?

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