Bootstrap: force col-auto not to be too greedy-CodePudding

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 >
  <div >
    <div >
      "Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.Duisauteiruredolorinreprehenderitinvoluptatevelitessecillumdoloreeufugiatnullapariatur.Excepteursintoccaecatcupidatatnonproident,suntinculpaquiofficiadeseruntmollitanimidestlaborum."
    </div>
    <div >
      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.

CodePudding user response：

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 >
  <div >
    <div >
      "Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.Duisauteiruredolorinreprehenderitinvoluptatevelitessecillumdoloreeufugiatnullapariatur.Excepteursintoccaecatcupidatatnonproident,suntinculpaquiofficiadeseruntmollitanimidestlaborum."
    </div>
    <div >
      2 of 2
    </div>
  </div> 
</div>


<h2> Flexbox without text-break </h2>
<div >
  <div >
    <div >
      "Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.Duisauteiruredolorinreprehenderitinvoluptatevelitessecillumdoloreeufugiatnullapariatur.Excepteursintoccaecatcupidatatnonproident,suntinculpaquiofficiadeseruntmollitanimidestlaborum."
    </div>
    <div >
      2 of 2
    </div>
  </div> 
</div>

<h2>With image</h2>

<div >
  <div >
    <div >
    <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 >
      2 of 2
    </div>
  </div> 
</div>

CodePudding user response：

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 instead of the columns themselves. 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 >
    <div >Column</div>
    <div >Column</div>
    <div >Column</div>
    <div >Column</div>
  </div>