角。使孩子 100% 宽度的 flex 父母答案

【问题标题】：Angular. Make child 100% width of flex parent角。使孩子 100% 宽度的 flex 父母
【发布时间】：2019-09-16 14:44:24
【问题描述】：

我有一个 Angular 组件，它有一个主 flex div main-container 和一个子 box。我希望孩子位于父母的中心，并且拥有父母宽度的 100%。下面代码的 sn-p 显示我的代码正在运行，但在 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 页面的照片：

非常感谢！

【问题讨论】：

您是否在删除max-width 属性后尝试过。此外，如果您可以与您的问题分享 Stackblitz 会更好。
我在删除 max-width 属性后尝试过，但没有任何改变。我现在正在创建一个 Stackblitz 页面。
Stackblitz 工作正常...我想我的项目有问题。我马上检查
我会做 margin: auto;宽度：100%；而不是 align-item 和 justify-content
新项目现在似乎运行良好。谢谢你的一切！

标签： html css angular flexbox

【解决方案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;
}

【讨论】：