Bootstrap Flexbox horizontal scrolling element not workin-CodePudding

I have written some CSS and used bootstrap to create a horizontal div with scroll ability but the output is not proper if I add <meta name="viewport" content="width=device-width, initial-scale=1">

In My Code

Code Output My Code:

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<style>
::-webkit-scrollbar {
  width: 1px;
  height: 0px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
::-webkit-scrollbar-thumb {
  background: #888; 
}
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}
.scrolling-wrapper{
    overflow-x: auto;
}
.card-block{
    height: 200px;
    width: 163px;
    background-color: #141414;
    border: none;
    background-position: center;
    background-size: cover;
    transition: all 0.2s ease-in-out !important;
    border-radius: 8px;
}
.card-block img{
    display: block;
    border-radius: 50%;
    height: 82px;
    width: 82px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
}
.card-block span{
    display: block;
    font-size: 18px;
    color: #fff;
    margin-top: 4px;
    margin-left: auto;
    margin-right: auto;
}
.card-block a{
    background-color: #007bdc;
    padding-left: 4px;
    padding-right: 4px;
    padding-top: 2px;
    padding-bottom: 2px;
    margin-right: auto;
    margin-left: auto;
    text-decoration: none;
    color: #fff;
    font-size: 12px;
    border-radius: 4px;
    margin-top: 12px;
}
</style>
    <div class="scrolling-wrapper row flex-row flex-nowrap mt-6 pb-6 pt-3">
            
            <div class="col-2">
                <div class="card card-block card-1">
                    <img src="http://placehold.it/80x80">
                    <span>
                        Om Prakash
                    </span>
                    <a href="#">
                        More Info
                    </a>
                </div>
            </div>
            <div class="col-2">
                <div class="card card-block card-2">
                    <img src="http://placehold.it/80x80">
                </div>
            </div>
            <div class="col-2">
                <div class="card card-block card-3">
                    <img src="http://placehold.it/80x80">
                </div>
            </div>
            <div class="col-2">
                <div class="card card-block card-4">
                    <img src="http://placehold.it/80x80">
                </div>
            </div>
            <div class="col-2">
                <div class="card card-block card-5">
                    <img src="http://placehold.it/80x80">
                </div>
            </div>
            <div class="col-2">
                <div class="card card-block card-6">
                    <img src="http://placehold.it/80x80">
                </div>
            </div>
            <div class="col-2">
                <div class="card card-block card-7">
                    <img src="http://placehold.it/80x80">
                </div>
            </div>
            <div class="col-2">
                <div class="card card-block card-8">
                    <img src="http://placehold.it/80x80">
                </div>
            </div>
            <div class="col-2">
                <div class="card card-block card-9">
                    <img src="http://placehold.it/80x80">
                </div>
            </div>
            <div class="col-2">
                <div class="card card-block card-10">
                    <img src="http://placehold.it/80x80">
                </div>
            </div>
    </div>
<br/>
<br/>
<br/>

CodePudding user response：

try using col-auto instead of col-2 and mx-0 with row

    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    </head>
    <style>
    ::-webkit-scrollbar {
      width: 1px;
      height: 0px;
    }
    ::-webkit-scrollbar-track {
      background: #f1f1f1; 
    }
    ::-webkit-scrollbar-thumb {
      background: #888; 
    }
    ::-webkit-scrollbar-thumb:hover {
      background: #555; 
    }
    .scrolling-wrapper{
        overflow-x: auto;
    }
    .card-block{
        height: 200px;
        width: 163px;
        background-color: #141414;
        border: none;
        background-position: center;
        background-size: cover;
        transition: all 0.2s ease-in-out !important;
        border-radius: 8px;
    }
    .card-block img{
        display: block;
        border-radius: 50%;
        height: 82px;
        width: 82px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 20px;
    }
    .card-block span{
        display: block;
        font-size: 18px;
        color: #fff;
        margin-top: 4px;
        margin-left: auto;
        margin-right: auto;
    }
    .card-block a{
        background-color: #007bdc;
        padding-left: 4px;
        padding-right: 4px;
        padding-top: 2px;
        padding-bottom: 2px;
        margin-right: auto;
        margin-left: auto;
        text-decoration: none;
        color: #fff;
        font-size: 12px;
        border-radius: 4px;
        margin-top: 12px;
    }
    </style>
        <div class="scrolling-wrapper row mx-0 flex-nowrap mt-6 pt-3">

  <div class="col-auto">
    <div class="card card-block card-1">
      <img src="http://placehold.it/80x80">
      <span>
        Om Prakash
      </span>
      <a href="#">
        More Info
      </a>
    </div>
  </div>
  <div class="col-auto">
    <div class="card card-block card-2">
      <img src="http://placehold.it/80x80">
    </div>
  </div>
  <div class="col-auto">
    <div class="card card-block card-3">
      <img src="http://placehold.it/80x80">
    </div>
  </div>
  <div class="col-auto">
    <div class="card card-block card-4">
      <img src="http://placehold.it/80x80">
    </div>
  </div>
  <div class="col-auto">
    <div class="card card-block card-5">
      <img src="http://placehold.it/80x80">
    </div>
  </div>
  <div class="col-auto">
    <div class="card card-block card-6">
      <img src="http://placehold.it/80x80">
    </div>
  </div>
  <div class="col-auto">
    <div class="card card-block card-7">
      <img src="http://placehold.it/80x80">
    </div>
  </div>
  <div class="col-auto">
    <div class="card card-block card-8">
      <img src="http://placehold.it/80x80">
    </div>
  </div>
  <div class="col-auto">
    <div class="card card-block card-9">
      <img src="http://placehold.it/80x80">
    </div>
  </div>
  <div class="col-auto">
    <div class="card card-block card-10">
      <img src="http://placehold.it/80x80">
    </div>
  </div>
</div>
<br/>
<div> <p>Hello I'm a Text</p></div>
    
    <br/>
    <br/>