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

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:
Child A accomodates on a single line as many children as possible for A and B to still fit on a single line.
Child A has the smallest width possible to achieve #1.
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