I'm experimenting with a design that utilizes Bootstrap's grid system, but I'm experiencing some challenges with the content either wrapping or extending off-screen. What I want is to have a sidebar with fixed width (around 250px), and its adjacent column to adjust dynamically and take up the remaining space.
My initial approach was to use the following markup:
<div class="row">
<div class="col-auto">
*content with fixed width*
</div>
<div class="col">
*content with dynamic width*
</div>
</div>
However, the content within the "col" class seems to force it to occupy the entire width, causing it to wrap to a new line. I attempted using "flex-nowrap" on the "row", which prevented wrapping but resulted in the content overflowing the column and extending off-screen to the right. It's possible I may be overlooking something obvious here.