Limit the width column content to column size on bootstrap using horizontal scroll bar-CodePudding

I have a very wide element, #widelement inside a bootstrap row col. I would like to enclose it on a div, .mywrapper, with a horizontal scroll bar in order to keep page layout.

Someone can explain to me what style I should add to .mywrapper to avoid that #widelement overflows the bootstrap col?

In this sample, the wide element has a 5000px width, but, this is not a fixed number, can be bigger or smaller, also smaller than col size.

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

<!-- first col -->
<div  style="background-color:yellow">
  <p >
    This text is ok, should be visible by default.
  </p>
</div>

<!-- second col -->
<div >
  <div  style="background-color:red;">
    <div id="widelement" style="width:5000px;">
      <p >
        This text is inside a 5000px div.
        I would like the div .mywrapper has a horizontal scrollbar.
        I mean, just a scrollbar for the div, not for the whole page.
        The div should be inside de col-6.
        On scrolling right, this text should become visible.
      </p>
    </div>            
  </div>
</div>

<!-- third and last col -->
<div  style="background-color:yellow">
  <p >
    My left div should have a scroll bar.
  </p>
</div>

</div>
</div>

What I tried unsuccessfully:

.mywrapper {
   overflow-x: scroll;
}

CodePudding user response：

Testing your solution I ended up with this snippet:

.mywrapper {
    overflow-x: scroll;
}

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

<!-- first col -->
<div  style="background-color:yellow">
  <p >
    This text is ok, should be visible by default.
  </p>
</div>

<!-- second col -->
<div >
  <div  style="background-color:red;">
    <div id="widelement" style="width:5000px;">
      <p >
        This text is inside a 5000px div.
        I would like the div .mywrapper has a horizontal scrollbar.
        I mean, just a scrollbar for the div, not for the whole page.
        The div should be inside de col-6.
        On scrolling right, this text should become visible.
      </p>
    </div>            
  </div>
</div>

<!-- third and last col -->
<div  style="background-color:yellow">
  <p >
    My left div should have a scroll bar.
  </p>
</div>

</div>
</div>

It turns out that the very code you have suggested works. So, something prevents it from working at your end, which could be one or more of the following:

client-side cache (your browser temporarily stores your css and js files in order not to have to download them each time you load a page and it's possible that when you have tested, the cached old version of your CSS was loaded by a locally cached file by your browser instead of downloading it from the server), Ctrl F5 (or even clear browser cache or even testing in a freshly opened incognito window) sorts this out
server-side cache (CloudFlare or some other server-side software generates static files periodically and sends those out to the browser upon page load rather than generating the response upon each request), in which case, you need to clear the server-side cache while you are testing
you forgot to save the code when you have edited it
you forgot to deploy it on the server
the wrong file was edited
the right file was edited, but it was wrongly not included into the HTML
some higher prio CSS rule prevented the overflow-x rule from being applied (see https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity)

So, your idea was correct, but something prevented it from providing the benefits you have expected. The issue therefore is something technical at your project and you will need to troubleshoot the potential issues listed above. If it still does not work at your end, then you will need to edit your question with more information and let the answerer(s), including myself know about the additional information.