具有多行线子项的单行布局，可换行到最小宽度

Question

问题

可以用CSS生成这样的布局吗？

我想有一排带两个孩子：

• 孩子A有多行，
• 孩子B有一个孩子。

我想要的布局如下：

1. 子级A容纳在一行上的子代数尽可能多，以便A和B仍能容纳在一行上。
2. 子级A具有达到＃1的最小宽度。
3. 然后，子B占用所有剩余空间。

我的HTML：

<div class="Container">
  <div class="ChildA">
    <input type="text" />
    <input type="text" />
    <input type="text" />
    <input type="text" />
  </div>
  <div class="ChildB">
    <button>
      Click me please
    </button>
  </div>
</div>

我想要的布局：

使用Flexbox绘制解决方案

到目前为止，我使用Flexbox提出了以下CSS：

.Container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  border: 4px solid black;
}

.ChildA {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  border: 4px solid red;
}

.ChildB {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;
  border: 4px solid blue;
}

它产生如下图所示的布局。问题是它违反了规则2-子A的宽度没有最小可能，而是占用了所有剩余空间，而我想由子B占用。

CSS网格？

似乎可以使用CSS Grid（其值为auto-fit）来解决该问题，但是我自己还无法生产出可以正常工作的解决方案。我要关闭的是that pen，它在某些窗口宽度上可以正常工作，但是我无法确定如何消除max-width: 50vw约束。

注意

我想要一个完全动态/灵活的解决方案，该解决方案可以处理容器中任何大小的内容。

在我的示例中，儿童内容是输入和按钮，但这只是一个随机的示例-它们可以是<div>或任何其他元素，如果它们使布局更易于实现。

提琴

https://codepen.io/anon/pen/mjdmXG?editors=1100