Single row layout with multine line child which wraps to minimum width

Question

Question

Can you produce such layout with CSS?

I want to have a single row with 2 children:

• Child A has multiple rows,
• Child B has a single one.

I want the the layout in which:

1. Child A accomodates on a single line as many children as possible for A and B to still fit on a single line.
2. Child A has the smallest width possible to achieve #1.
3. Child B then takes all the remaining space.

My 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>

My desired layout:

Sketch of a solution using Flexbox

So far I came up with the following CSS using Flexbox:

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

It produces layout pictured below. The problem is it violates rule #2 - child A does not have the smallest width possible, but instead takes all the remaining space, which I want to be taken by child B instead.

CSS Grid?

It seems the solution may be possible using CSS Grid (and it's auto-fit value), but I haven't been able to produce a fully working one myself yet. The closes I've come is that pen, which works fine on some window widths, but I cannot work out how to remove max-width: 50vw constraint.

Note

I want a fully dynamic/flexible solution, which would work with content of any size in the containers.

Children content in my example are inputs and button, but that's just a random example - they can be <div>s or any other elements, if it makes the layout easier to implement.

Fiddle

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