Как заставить div перейти к следующей строке с контейнером flex display

Question

Как я могу заставить последний div перейти на следующую строку?Строчный div имеет гибкий дисплей.

<div class="row inline-row">
  <div class="input-cost">
    <label>Cost</label>
    <div class="input-description"></div>
    <input class="input-number" formControlName="cost">
  </div>

  <div class="input-discount">
    <label>Discount (%)</label>
    <div class="input-description"></div>
    <input class="input-number" formControlName="cost">        
  </div>

  <div>
    <div class="form-helper">This div to new line</div>
  </div>
</div>

CSS

.inline-row {
  display: flex;
  justify-content: flex-start;
}

Answer 1

Это можно сделать двумя способами.

1) Вы можете установить width на container и добавить flex-wrap:wrap;, чтобы последний элемент автоматически переносился на следующую строку.

.inline-row {
  display: flex;
  justify-content: flex-start;
  width:400px;
  flex-wrap: wrap;
}

<div class="row inline-row">
  <div class="input-cost">
    <label>Cost</label>
    <div class="input-description"></div>
    <input class="input-number" formControlName="cost">
  </div>

  <div class="input-discount">
    <label>Discount (%)</label>
    <div class="input-description"></div>
    <input class="input-number" formControlName="cost">        
  </div>

  <div>
    <div class="form-helper">This div to new line</div>
  </div>
</div>

2) Если вы не хотите устанавливать ширину контейнера, вы можете вручную установить для последнего элемента div width значение 100%перенесемся на следующую строку

.inline-row {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.inline-row div:nth-child(3){width:100%;}

<div class="row inline-row">
  <div class="input-cost">
    <label>Cost</label>
    <div class="input-description"></div>
    <input class="input-number" formControlName="cost">
  </div>

  <div class="input-discount">
    <label>Discount (%)</label>
    <div class="input-description"></div>
    <input class="input-number" formControlName="cost">        
  </div>

  <div>
    <div class="form-helper">This div to new line</div>
  </div>
</div>