bootstrap 4 cards content overflow - html

Question

Can anyone help me figure out what's wrong with my layout? I am adding some controls to a card and the content overflows. I want the card to be as wide as the widest row...
<div class="container">
<div class="row">
<div class="col-auto p-4 ">
<div class="card">
<div class="card-header"><h4>Find a contact</h4></div>
<div class="card-body">
<div class="row flex-nowrap">
<div class="col-4 p-1 text-right">First:</div>
<div class="col-8 p-1"><input type="text">
</div>
</div>
<div class="row p-1 flex-nowrap">
<div class="col-4 p-1 text-right">Last:</div>
<div class="col-8 p-1"><input type="text">
</div>
</div>
<div class="row p-1 flex-nowrap">
<div class="col-4 p-1 text-right">Compnay:</div>
<div class="col-8 p-1"><input type="text">
</div>
</div>
<div class="row p-1">
<div class="col-8 p-1 offset-4 text-nowrap"><input type="submit" value="Search" class="btn btn-sm m-2"/>My contacts only: <input id="checkBox" type="checkbox[enter link description here][1]"></div>
</div>
</div>
<div class="card-footer">
<div class="row ">
<div class="col">more search</div>
</div>
</div>
</div>
</div>
</div>
Here is the jsfiddle: https://jsfiddle.net/msz2ndkr/21/

Answer 1

The problem with your html is the following line:
<div class="row p-1">
<div class="col-8 p-1 offset-4 text-nowrap"><input type="submit" value="Search" class="btn btn-sm m-2"/>My contacts only: <input id="checkBox" type="checkbox"/></div>
</div>
Bootstrap assumes 12 columns and you have specified 8 columns (col-8). All your other rows have 12. Also, get rid of the offset-4. Here is my solution:
<div class="row p-1">
<div class="col-12 p-1 text-nowrap"><input type="submit" value="Search" class="btn btn-sm m-2"/>My contacts only: <input id="checkBox" type="checkbox"/></div>
</div>
Here is a fiddle

Answer 2

There seems to be a problem with how 'width: auto' is calculated and set on certain elements and their parents. Try making your nowrap container a flexbox and set some width for it's children like:
`
.nowrap-elems-container {
display: flex;
flex-wrap: nowrap;
white-space: nowrap;
}
`
https://jsfiddle.net/a0godL7b/25/
it's not too elegant but it should work