Flex/Nowrap not working with first column and text-truncate in bootstrap

Question

I can't seem to get the first column not to wrap, the CDT keeps going to the second row. The second column has a text truncate on it. How can I get the first column to expand so the column never wraps.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.css" rel="stylesheet"/>
<div class="card-header text-center d-flex justify-content-center" style="width:350px">
<div class="mr-1 flex-nowrap" data-bind="html: TimeFormatted">
    9:05 AM CDT
</div>
<div class="d-flex text-truncate">
    @
    <span class="text-truncate mx-1" data-bind="text: VenueName">
        ACA  dsf asdf sdsadf d fsd fsd fsd fsa
    </span>
    (<span data-bind="text: CourtName">East</span>)
</div>
</div>

Answer 1

Use flex-shrink: 0

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.css" rel="stylesheet"/>
<div class="card-header text-center d-flex justify-content-center" style="width:350px">
        <div class="mr-1 flex-shrink-0 flex-nowrap" data-bind="html: TimeFormatted">9:05 AM CDT</div><div class="d-flex text-truncate">@<span class="text-truncate mx-1" data-bind="text: VenueName">ACA  dsf asdf sdsadf d fsd fsd fsd fsa</span> (<span data-bind="text: CourtName">East</span>)</div>
    </div>