flexbox 没有采用正确的宽度 Angular答案

【问题标题】：The flexbox is not taking the right width Angularflexbox 没有采用正确的宽度 Angular
【发布时间】：2018-04-25 10:12:03
【问题描述】：

我创建了一个弹性表格，但它没有向我显示正确的表格，只有第一个表格很好，其他表格的宽度不同。我试图将课程计划的另一个 div 放入，但没有在行中显示我。

您可以在下面找到代码。

<div class="planning-videx">
    <div class="name-block" *ngFor="let valueItem of showVI()">
      {{valueItem.name}}
      <div class="planned">
        {{actualCosts | moneyFormat}}
      </div>
      <div class="planned">
        {{plannedCosts | moneyFormat}}
      </div>
    </div>
  </div>

这是CSS

$row-background-color: white;
$row-height: 100%;
$content-height: 45px;
.planning-videx {
  @extend .vp-column;
  margin-left: 10px;
  overflow: auto;
  max-height: $row-height;
  .name-block {
    @extend %common-block;
    @include center(false, true);
    @include justify-content(space-between);
    height: 40px;
    margin-left: 1px;
    padding-left: 10px;
    div.planned {
      @extend %flexbox;
      @include center(false, true);
      border-left: solid thin $border-color;
      padding: 0 5px;
      width: 150px;
      height: 100%;
    }

  }
  .costs-block {
    @extend %common-block;
    @include center();
    @include justify-content(flex-end);
    margin-left: 10px;
    padding-right: 5px;
    width: 100px;
    flex-direction: row;
  }
}

%common-block {
  @extend .vp-row;
  background-color: $row-background-color;
  margin-top: 1px;
  margin-bottom: 1px;
  min-height: $content-height;
  border: solid thin $border-color;
  border-radius: 3px;
}

【问题讨论】：

你可能还想为你的 mixins 提供代码。
@Pytth 对不起，我不明白，因为这是我写的所有代码？

标签： html css angular flexbox

【解决方案1】：

我会为货币类别设置一个弹性基础或设置宽度，然后为标题设置一个“弹性：1”，以便它可以增长到剩余空间。

【讨论】：