有角。使子级宽度为弹性父级的 100%

Question

我有一个 Angular 组件，带有一个主 flex divmain-container和一个 child 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>

这是我的 Angular 页面的样子的照片：

非常感谢！

Answer 1

切换width: 100%到max-width: 100vw主容器中，并flex: 1在盒式容器中使用。

• max-width将阻止任何水平滚动条，保持容器始终可见。
• flex: 1flex-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;
}