Html 弹性物品应获得线条中所有剩余宽度

我有flex容器和3个flex itemsitem1，item2，item3在里面

我需要做以下事情：

项目1应位于顶部 第2项应在第1项下 项目3应与项目2位于同一行 其他要求： 例如，线的宽度为700px； 第2项和第3项的总尺寸应为700px，但如果容器将调整为更小的尺寸，例如：650px，第2项和第3项的总尺寸应为650px

<div class="flex-container">
  <div class="item-1" />
  <div class="item-2" />
  <div class="item-3" />
</div>

---

您可以简单地执行以下操作：

.柔性容器{ 显示器：flex； 柔性流：行换行； } .flex容器>*{ 边框：1px实心； 框大小：边框框； } .项目-1{ 弹性基准：100%；/*第一行的全宽*/ } .项目-2， .项目-3{ flex:1；/*在第二行上均匀填充空格*/ } 1. 2. 3.

.flex-container {
   display: flex;
   flex-flow: row wrap;
}

.item-2 {
   flex-basis: 78%;
}

.item-3 {
  display: inline-block;
}