Угловой.Сделайте ребенка 100% шириной гибкого родителя

Question

У меня есть угловой компонент с основным flex div main-container и дочерним элементом box. Я хочу, чтобы ребенок находился в центре родительского элемента, а также чтобы его ширина составляла 100%. Фрагмент приведенного ниже кода показывает, что мой код работает, но в Angular ширина box равна 80px (сделана отступом).

.main-container {
    width: 100%;
    min-height: 100vh;
    padding: 15px;
    background: linear-gradient(-135deg, #c850c0, #4158d0);
    display: flex;
    justify-content: center;
    align-items: center;
}
.box {
    max-width: 500px;
    width: 100%;
    padding: 40px;
    border-radius: 10px;
    background: #fff;
    text-align: center;
}

<div class="main-container">
  <div class="box">
  </div>
</div>

Вот фотография того, как выглядит моя угловая страница:

Большое спасибо!

Answer 1

Переключите width: 100% на max-width: 100vw в основном контейнере и используйте flex: 1 в контейнерном контейнере.

• max-width предотвратит любую горизонтальную полосу прокрутки, сохраняя контейнер всегда видимым.
• flex: 1: сочетание клавиш flex-grow: 1, flex-shrink: 1 и flex-basis: 0px заставит поле заполнить все оставшееся пространство внутри контейнера.

.main-container {
    max-width: 100vw; // <= try this
    min-height: 100vh;
    padding: 15px;
    background: linear-gradient(-135deg, #c850c0, #4158d0);
    display: flex;
    justify-content: center;
    align-items: center;
}
.box {
    flex: 1;  <= And this
    padding: 40px;
    border-radius: 10px;
    background: #fff;
    text-align: center;
}