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.

MaxiGui · Accepted Answer · 2022-04-19T12:10:37.117

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>

This only works for texts though... my specific project is quite large and complex. The content within the columns is dynamic and are mostly things like charts, datagrids, ... provided by a third-party component provider. Is there a `text-break` alternative such that it works for everything? — Wouter Vandenputte, Apr 19 '22 at 10:56
In my example, `text-break` only helps you to take back the text to the line, the large is manage because of the `col` that replace the `col-auto`. If you remove the `text-break` you will see that your column will apply your `overflow`. If you give a more complex example, I would be glad to help you. (I edited the demo to show you that the diff is the col part) — MaxiGui, Apr 19 '22 at 11:37
I edited my fiddle and came up with this: https://jsfiddle.net/Ltzycvk7/13/ It uses an image instead of text and we can now see that the second column, which is still a text is rendered above the first column instead of on the side. The first column takes the entire width of the image but there is no such space available in the viewport. — Wouter Vandenputte, Apr 19 '22 at 11:57
you can always apply something like this to your css: `.col > img{ max-width:100%; }` or use `.col > * ` to make sure that it respect column width. I edited the demo — MaxiGui, Apr 19 '22 at 12:08
Thanks. that did it. (FYI: editing the demo creates a new fiddle, not overwritting the current one) — Wouter Vandenputte, Apr 20 '22 at 07:05
I edited the demo here, in my answer, not in the fiddle. Dont forget to set your question solved by accepting my answer. — MaxiGui, Apr 20 '22 at 08:36

Cutey from Cute Code · Answer 2 · 2022-04-21T00:35:28.957

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>

Bootstrap: force col-auto not to be too greedy

2 Answers2