Bootstrap Side-by-Side-Spalte mit dynamischer Breite

Ich habe eine zweispaltige Box in Bootstrap. Beide Spalten werden voraussichtlich dynamischen Inhalt haben. Die zweite Spalte sollte neben der ersten sein. Und wenn die Spaltenbreite die Gesamtbreite des äußeren div überschreitet, sollte die erste Spalte nur den verbleibenden Platz einnehmen. Bitte beachten Sie zur besseren Verdeutlichung den beigefügten Screenshot.

Erwartete Ausgabe

Ich verwende Bootstrap 4.6.1 Framework im Projekt. Ich habe es mit verschiedenen Methoden versucht, einschließlich CSS3 Flex, Grid usw. Dies ist vorerst mein Code.

<div class="container-fluid">
 <div class="row">
 <div class="col-auto box">
 Lorem ipsum dolor sit amet, consectetur adipisicing elit.
 </div>
 <div class="col-auto box">Lorem Ipsum</div>
 </div>
 <br/><br/>
 <div class="row">
 <div class="col-auto box">
 <div class="inner">
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae distinctio molestias nulla, voluptatum ut nesciunt, in. Deserunt optio inventore animi officia alias cumque incidunt! Alias impedit dolores velit recusandae blanditiis!
 </div>
 </div>
 <div class="col-auto box">Lorem Ipsum dolor sit, consectetur adipisicing elit</div>
 </div>
</div>

Dies ist der Link zur jsfiddle

Konnte aber keine Lösung finden. Kann mir bitte jemand helfen?

Lösung des Problems

flex-nowrapSie könnten die Klasse zu Ihren Zeilen hinzufügen:

.box {
 border: 1px solid red;
}
.truncate {
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 padding: 0 15px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid">
 <div class="row flex-nowrap">
 <div class="truncate box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae distinctio molestias nulla, voluptatum ut nesciunt, in. Deserunt optio inventore animi officia alias cumque incidunt! Alias impedit dolores velit recusandae blanditiis!</div>
 <div class="col-auto box">Lorem Ipsum dolor sit, consectetur adipisicing elit</div>
 </div>
 <br />
 <div class="row flex-nowrap">
 <div class="truncate box">Lorem ipsum dolor sit amet</div>
 <div class="col-auto box">Lorem Ipsum dolor sit, consectetur adipisicing elit</div>
 </div>
</div>