Responsive flex grow and shrink not working in Boostrap-CodePudding

So I'm just sandboxing how responsive flex and shrink works in Bootstrap. Below is my code. Nothing seems to work. I've tried using different breakpoints such as lg/md/sm but to no luck. Would appreciate any guidance.

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Google Font -->
  <link href="https://fonts.googleapis.com/css?family=Nunito:200,300,400,700" rel="stylesheet">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

  <!-- Custom CSS -->
  <link rel="stylesheet" href="app.css">

  <title>Practice </title>
</head>

<body>
  <div class="container-fluid">
    <div class="row bd-highlight">
      <div class="col border border-2 flex-md-shrink-1">Flex item 1</div>
      <div class="col border border-2 flex-md-shrink-0">Flex item 2</div>
    </div>
  </div>

  <!-- Optional JavaScript -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
</body>

</html>

CodePudding user response：

Since .col is flex: 1 0 0% columns will grow, but not shrink so your test isn't doing anything to override .col. You could change flex-grow to override the .col behavior...

<div class="container-fluid">
    <div class="row">
        <div class="col border border-2 flex-md-shrink-1 flex-md-grow-1">Flex item 1</div>
        <div class="col border border-2 flex-md-shrink-0 flex-md-grow-0">Flex item 2</div>
    </div>
</div>

https://codeply.com/p/0pUmeIxKEX

CodePudding user response：

Try to use only d-flex and not combine it with bootstrap's grid system (.col and .row)

Here is the modified example:

<!doctype html>
<html lang="en">


<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Google Font -->
  <link href="https://fonts.googleapis.com/css?family=Nunito:200,300,400,700" rel="stylesheet">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

  <!-- Custom CSS -->
  <link rel="stylesheet" href="app.css">

  <title>Practice </title>

  <style>
    .item-container {
      width: 100%;
    }
    
    .item {
      flex-basis: 100%;
      flex-shrink: 200px;
    }
    
    .item-shrink {
      flex-shrink: 3;
    }
  </style>
</head>

<body>

  <div class="item-container d-flex bd-highlight">
    <div class="item item-shrink border border-2">Flex item 1</div>
    <div class="item border border-2">Flex item 2</div>
  </div>


  <!-- Optional JavaScript -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
</body>

</html>