Bootstrap: force col-auto not to be too greedy

Question

If we take a look at this minimalistic below example where I layout two columns with class col-auto. I.e.: take the space you need.

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
  overflow: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">


<div class="container-fluid w-100">
  <div class="row flex-nowrap">
    <div class="col-auto">
      "Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.Duisauteiruredolorinreprehenderitinvoluptatevelitessecillumdoloreeufugiatnullapariatur.Excepteursintoccaecatcupidatatnonproident,suntinculpaquiofficiadeseruntmollitanimidestlaborum."
    </div>
    <div class="col-auto">
      2 of 2
    </div>
  </div> 
</div>

OUTPUT:

The problem now is that the first column takes so much space that it overrides the second column and even the viewport. Is there a neat way to ensure that each column, although able to take available space, not to be too greedy and still leave space for the other columns? It should then simply display a scrollbar for its own content and the second column should simply be a very small column for the text '2 of 2'.

Note that I deliberately want them to be next each other and not wrapped to the next line.

Answer 1

In your first column:

• Add class text-break
• Replace the col-auto by a col

Bootstrap text-break Doc

Difference between bootstrap col and col-auto:

.col{
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
}
.col-auto{
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
}

DEMO:

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
  overflow: auto;
}

.col > img{
  max-width:100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">

<h1> With or Without text-break</h1>
<h2> Flexbox with text-break </h2>

<div class="container-fluid w-100">
  <div class="row flex-nowrap">
    <div class="col text-break">
      "Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.Duisauteiruredolorinreprehenderitinvoluptatevelitessecillumdoloreeufugiatnullapariatur.Excepteursintoccaecatcupidatatnonproident,suntinculpaquiofficiadeseruntmollitanimidestlaborum."
    </div>
    <div class="col-auto">
      2 of 2
    </div>
  </div> 
</div>


<h2> Flexbox without text-break </h2>
<div class="container-fluid w-100">
  <div class="row flex-nowrap">
    <div class="col">
      "Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.Duisauteiruredolorinreprehenderitinvoluptatevelitessecillumdoloreeufugiatnullapariatur.Excepteursintoccaecatcupidatatnonproident,suntinculpaquiofficiadeseruntmollitanimidestlaborum."
    </div>
    <div class="col-auto">
      2 of 2
    </div>
  </div> 
</div>

<h2>With image</h2>

<div class="container-fluid w-100">
  <div class="row flex-nowrap">
    <div class="col">
    <img src="https://nystudio107-ems2qegf7x6qiqq.netdna-ssl.com/img/blog/_1200x675_crop_center-center_82_line/image_optimzation.jpg.webp">
<!--       "Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.Duisauteiruredolorinreprehenderitinvoluptatevelitessecillumdoloreeufugiatnullapariatur.Excepteursintoccaecatcupidatatnonproident,suntinculpaquiofficiadeseruntmollitanimidestlaborum." -->
    </div>
    <div class="col-auto">
      2 of 2
    </div>
  </div> 
</div>

Answer 2

Not sure if this is a perfect solution but you could try row-cols class. This lets you define the columns using the class in their parent Row. You can add as many columns as you like into the Row below but row-cols-2 makes an auto-width to ensure only 2 columns side-by-side and the next 2 stacked below. No custom CSS required.

 <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>