Question 293472 in Html Question posted in
Some basic documentation can be found here.

Html – Why does my div not overflow with a scrollable bottom

I’ve tried making my div, with divs inside, where instad of them making a new line, they will just be scrollable, but i cant make it work. Can any here see what i’m doing wrong.

<div class="container-fluid p-0">
            <div class="row g-0 bettingTips">
                <div class="bettingTipsBox">
                    <div class="row">
                        <div class="col-5">
                        <img src = "assets/logo/Complexity.svg" alt="My Happy SVG"/>
                    </div>
                    <div class="col-2">
                        <b>VS</b>
                    </div>
                        <div class="col-5">
                            <img src = "assets/logo/Complexity.svg" alt="My Happy SVG"/>
                        </div>
                    </div>
                    <div class="row" style="text-align: center;">
                        <b>Spil Forslag</b>
                        <i>Complexity sejr 2-0</i>
                        <hr>
                        <b>Begrundelse</b>
                        <i>Vi tror de vinder fordi de har store nosser</i>
                        <br>
                        <b>Spilles på</b>
                        <img src = "assets/logo/Complexity.svg" alt="My Happy SVG"/>
                    </div>
                </div>
                </div>
            </div>

Any that can see why my divs does not overflow as i want them to?

    .bettingTips {
    overflow-x: scroll;
    overflow-y: hidden;
     white-space: nowrap;
}
.bettingTipsBox {
    margin: 0px !important;
    padding: 30px !important;
    width: 25% !important;
    background-color: lightgrey;
}
Tags:

2

Answers


  1. 0

    You have not written the HTML code in the correct way. You have placed some extra divs which makes the code behave incorrectly. Here is the formatted code.

    <div class="container-fluid p-0">
  <div class="row g-0 bettingTips">
      <div class="bettingTipsBox">
          <div class="row">
              <div class="col-5">
              <img src ="assets/logo/Complexity.svg" alt="My Happy SVG"/>
          </div>
          <div class="col-2">
              <b>VS</b>
          </div>
          <div class="col-5">
              <img src = "assets/logo/Complexity.svg" alt="My Happy SVG"/>
          </div>
          <div class="row" style="text-align: center;">
              <b>Spil Forslag</b>
              <i>Complexity sejr 2-0</i>
              <hr>
              <b>Begrundelse</b>
              <i>Vi tror de vinder fordi de har store nosser</i>
              <br>
              <b>Spilles på</b>
              <img src = "assets/logo/Complexity.svg" alt="My Happy SVG"/>
          </div>
      </div>
  </div>
</div>

    To make the content scrollable is possible by setting height to the bettingTips class and making the bettingTipsBox class to take the full height. Here is an example of the CSS code that must be applied.

    .bettingTips {
  height: 200px;
  max-height: 200px;
  overflow: auto;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
}

.bettingTipsBox {
  margin: 0px !important;
  padding: 30px !important;
  width: 25% !important;
  background-color: lightgrey;
  height: 100%;
}
    Login or Signup to reply.
  2. 0

    To make your divs horizontally scrollable, set the container to display: flex; and apply overflow-x: auto; to it. Ensure each child div has a fixed width so they collectively exceed the container’s width.

    .bettingTips {
    display: flex;
    overflow-x: auto;
}

.bettingTipsBox {
    width: 25%;
    flex-shrink: 0;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search