CODEWITHSUNDEEP
twitter-bootstrapflexboxbootstrap-4
Connie DeCinko CS
Connie DeCinko CS

Reputation: 161

Horizontal scroll in right column only

I found a code sample that sort of does what I want. I need the left column of a typical Bootstrap layout to remain fixed, and only allow vertical scrolling while the right column contains an unlimited number of cards, all scrolling horizontally. The problem is, the horizontal scroll wants to take up the enter screen, scrolling over the top of my left list.

enter image description here

How do I make it only scroll in the right column?

CodePen here: https://codepen.io/anon/pen/JZJOgK

<div class="container-fluid">
  <div class="row">
    <div id="left" class="col-lg-2">
      <div class="card card-block">list</div>
    </div>
    <div id="right" class="col offset-lg-2">

      <div class="row flex-row flex-nowrap">
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                    <div class="card card-block">Card</div>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                    <div class="card card-block">Card</div>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                    <div class="card card-block">Card</div>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                    <div class="card card-block">Card</div>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                    <div class="card card-block">Card</div>
                </div>
               <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                    <div class="card card-block">Card</div>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                    <div class="card card-block">Card</div>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                    <div class="card card-block">Card</div>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                    <div class="card card-block">Card</div>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                    <div class="card card-block">Card</div>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                    <div class="card card-block">Card</div>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                    <div class="card card-block">Card</div>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                    <div class="card card-block">Card</div>
                </div>
            </div>

    </div>
  </div>
</div>

Upvotes: 0

Views: 185

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362780

Hide the overflow on the body, and enable it (overflow-x:auto) on the right column...

body {
  overflow-x:hidden;
}

#right {
  background-color: white;
  padding-left:25px;
  overflow-x:auto;
}

https://codepen.io/anon/pen/yEXpPy

Upvotes: 1

Related Questions