Компонент неправильно настраивает свойство ширины. ⇐ CSS

[Anonymous]

Я изо всех сил пытаюсь установить ширину компонента в Angular. Я использую flex, возможно, мне поможет сетка, но я хочу использовать flexbox для обучения. Для простоты у меня есть страница с элементом div, содержащим 6 экземпляров моего компонента.

Код: Выделить всё

стили

Код: Выделить всё

.card {
width: 600px;
display: flex;
flex-wrap: wrap;
}

Компонент:

Код: Выделить всё

{{ label }}

стили компонента:

Код: Выделить всё

.row__input {
display: flex;
flex-direction: column;
gap: 4px;
max-width: 240px;
width: 100%;
}
.a {
height: 48px;
background-color: red;
max-width: 240px;
width: 100%;
}

Проблема в том, что я хочу отображать компонент с максимальной шириной 240 пикселей, поэтому в случае полноэкранного режима поля отображаются с шириной 240 пикселей, но как только я уменьшаю размер экрана, ширина компонента тоже должна быть меньше.
Одним из решений, которые я нашел, является использование :host{ display:contents, но я не уверен, что это хорошо. упражняться. Возможно, это связано с тегом, который Angular использует для размещения компонента в DOM, потому что при использовании непосредственно элементов div вместо компонента ширина отображается правильно.
Я уверен, что чего-то не хватает. но я не знаю, что это такое.
Кроме того, считаете ли вы, что сочетание сетки и флексбокса — хорошая практика?

Подробнее здесь: https://stackoverflow.com/questions/790 ... -correctly