有角度的。使子代100％宽度作为父代

Question

我有一个Angular组件，其中有一个主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>

这是我的Angular页面外观的照片：

非常感谢您！

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;
}