Q:

What's the opposite of .flex-fill in Bootstrap 4?

Following the documentation here : https://getbootstrap.com/docs/4.1/utilities/flex/#fill
I want a flex element to fill only on devices smaller than sm (which lines up with my column breakpoint in the example)
So, I would use something like .flex-fill .flex-sm-nofill
But there's no such thing as flex-nofill!
I feel like I'm missing something obvious here, but how I can solve my problem using only vanilla bootstrap classes?
I understand it wouldn't be hard to create this new -nofill class, but I just wanted to know if there's already a solution and I just couldn't figure it out.
Code Example, in this case the elements I want to fill are the Buttons :
<div class="row justify-content-between p-3">
  <div class="col-12 col-sm-8 col-xl-6 pb-2">
    <select class="custom-select" id="layer_select">
        <option data-dismiss="modal" value="0">Option1</option></select>
  </div>
  <div class="col-12 col-sm-3">
    <div class="d-flex justify-content-between justify-content-sm-end">
      <button class="btn btn-outline-secondary mr-2 flex-fill flex-sm-nofill"><i class="material-icons">file_download</i></button>
      <button class="btn btn-outline-secondary flex-fill flex-sm-nofill"><i class="material-icons">filter_list</i></button>
    </div>
  </div>
</div>

Fiddle (Mess with the width to see the effect) : https://jsfiddle.net/xpvt214o/155315/
I want the buttons to have fixed width when they're side by side with the select.

A:

flex-fill sets flex: 1 1 auto.
In order to change this for the sm breakpoint, you can set flex-sm-grow-0.
Then you'll have flex: 0 1 auto.
See Grow and Shrink.

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v36/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -moz-font-feature-settings: 'liga';
  -moz-osx-font-smoothing: grayscale;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<div class="row justify-content-between p-3">
  <div class="col-12 col-sm-8 col-xl-6 pb-2">
    <select class="custom-select" id="layer_select">
     <option data-dismiss="modal" value="0">Option1</option></select>
  </div>
  <div class="col-12 col-sm-3">
    <div class="d-flex justify-content-between justify-content-sm-end">
      <button class="btn btn-outline-secondary mr-2 btn-icon flex-fill flex-sm-grow-0"><i class="material-icons">file_download</i></button>
      <button class="btn btn-outline-secondary btn-icon flex-fill flex-sm-grow-0"><i class="material-icons">filter_list</i></button>
    </div>
  </div>
</div>

