Why won't the horizontal scroll bar function properly even after I specified a fixed width for the parent div?

My horizontal scrollbar is not functioning as expected in my React app. I am currently working on a TableData component and here is the rendered JSX code:

<table>
        <div className="co-table">
                <div className="co-table__long">
                    <div className="co-table__header">
                        <div className="co-table__header--col">
                            {" "}
                            <span>Date d'operation</span>{" "}
                        </div>
                        <div className="co-table__header--col">
                            {" "}
                            <span>Type de Mouvement</span>{" "}
                        </div>
                        <div className="co-table__header--col">
                            {" "}
                            <span>Montant ($$) </span>{" "}
                        </div>
                    </div>
                    <div className="co-table__corps">
                        <div className="co-table__corps--head">head</div>
                        <div className="co-table__corps--row">
                            <div className="co-table__corps--column">ff</div>
                            <div className="co-table__corps--column">ff</div>
                            <div className="co-table__corps--column">ff</div>
                        </div>
                        <div className="co-table__corps--row">
                            <div className="co-table__corps--column">ff</div>
                            <div className="co-table__corps--column">ff</div>
                            <div className="co-table__corps--column">ff</div>
                        </div>
                    </div>
                    <div className="co-table__corps">
                        <div className="co-table__corps--head">head</div>
                        <div className="co-table__corps--row">
                            <div className="co-table__corps--column">ff</div>
                            <div className="co-table__corps--column">ff</div>
                            <div className="co-table__corps--column">ff</div>
                        </div>
                        <div className="co-table__corps--row">
                            <div className="co-table__corps--column">ff</div>
                            <div className="co-table__corps--column">ff</div>
                            <div className="co-table__corps--column">ff</div>
                        </div>
                    </div>
                    <div className="co-table__corps">
                        <div className="co-table__corps--head">head</div>
                        <div className="co-table__corps--row">
                            <div className="co-table__corps--column">ff</div>
                            <div className="co-table__corps--column">ff</div>
                            <div className="co-table__corps--column">ff</div>
                        </div>
                        <div className="co-table__corps--row">
                            <div className="co-table__corps--column">ff</div>
                            <div className="co-table__corps--column">ff</div>
                            <div className="co-table__corps--column">ff</div>
                        </div>
                    </div>
                </div>
            </div>
</table>

The issue involves setting up a horizontal scrollbar within the div with the class **** co-table__long **** but it doesn't seem to be functioning correctly. The total width of this element's children exceeds 700px, while the parent width is set to 300 px to enable visibility of the horizontal scrollbar, instead only the vertical scrollbar is appearing.

To have a better idea of the desired outcome, please refer to this image: https://i.sstatic.net/BH85b.png

You can access a live preview of the project here: https://codesandbox.io/s/y03696lrl9

Your assistance in resolving this matter would be greatly appreciated.

Answer №1

Make a simple adjustment to your CSS for the class "co-table__long" like this:

.co-table__long {    
    max-width: 300px;
    height: 150px;
    overflow: auto;
}

It's important to include 'width' or 'max-width' when using the 'overflow' property on an element.

For a visual reference, you can view the changes in action on this CodeSandbox link

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Deleting entries from a selection of items in a list generated from an auto-fill textbox

I have successfully implemented an auto-complete Textbox along with a styled div underneath it. When the client selects an item from the Textbox, it appears in the div after applying CSS styling. Now, I am looking to create an event where clicking on the s ...

Tips for saving an HTML image with a unique source format (blob)

As I examine the element, the src displayed for the img is an incredibly long string that had to be significantly shortened for it to fit here. data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAyAAAAMgCAYAAADbcAZoAAAAAXNSR... However, when I extract the src ...

Retrieve information from a JavaScript file to incorporate into an HTML file

Seeking a solution to store the base URL in a separate JavaScript file, I've implemented a JavaScript file named config.js containing: export const baseUrl = "https://example.com/"; There are multiple HTML files utilizing this base URL for ...

Build a dynamic table by leveraging JSON with the power of JavaScript and HTML

I'm currently working on creating a table where information is stored and updated (not appended) in a JSON file using JavaScript and HTML. The structure of my JSON data looks like this: [{ "A": { "name": "MAK", "height": 170, ...

Tips for managing content and tables that exceed their container's boundaries

On my webpage, I have a slide-out sidebar that shifts the other contents and causes overflow with a scrollbar. I want the content to remain inside the window and adjust according to the available space. Image of Slide-out Sidebar As seen in the image, t ...

Can PhoneGap be used to create HTML5 applications from scratch?

Despite diligently searching through the PhoneGap website and their support group, I am still coming up empty-handed in my quest for an answer: My current project involves creating an application that functions as a pure HTML5 application, capable of runn ...

Utilizing JavaScript to dynamically adjust the height of one div to match the height of another div

Struggling to adjust the height of one div to match another using the following code: var aboutheight=document.getElementById('about').offsetHeight; document.getElementById('sampledogs').setAttribute("style","height:aboutheight"); Des ...

Modifying the Placeholder Color in a Material UI Autocomplete: Tips and Tricks

In my team, we are working on two projects that both utilize an internal library with a header containing a search box. In one project, the placeholder text "Search" displays normally. https://i.stack.imgur.com/lhL5V.png However, in the second project wh ...

Mastering ReactJS: Error Encountered - Unexpected import Token

Just getting started with ReactJS and trying out some code from egghead.io. Unfortunately, I keep running into this error: Uncaught SyntaxError: Unexpected token import I've tried loading babel again and making sure to follow the lesson step by step ...

Issues with CKEditor's failure to save content in utf-8 character encoding

Let me explain my situation concisely. I'm encountering an issue with my PHP project that I can't seem to resolve. The problem arises when I try to update the content using CKEditor on my website. Below is the configuration and instance of CKEdi ...

The image spills out of its confines

Looking to create a dialogue box that fills the entire width and height of the screen? Want to divide its content into two sections - an image and a footer area with 2 rows of height? Struggling to contain the image within its designated space without over ...

What could be causing my content to unexpectedly break out of its designated div structure?

My website on Wordpress is causing me trouble. When I input text directly into the HTML/CSS structure hardcoded style, it fits perfectly. However, when I attempt to do the same thing using Wordpress <?php echo the_content();?>, it ends up breaking ou ...

unable to successfully execute jQuery popup close functionality

I have a button on my mobile site that I want to function as follows: Upon clicking the button, a popup should appear with text and an OK button. When the OK button is clicked, the popup should disappear without affecting the page. My code for this functi ...

Sliding the container with a width adjustment and left margin fails to display all images

In the provided HTML code below, there is a functionality to move images horizontally by clicking on buttons: $(document).ready(function() { calculate_width(); $('#moveleft').click(function() { var loga = $('#marki #loga'); ...

What could be causing the discrepancy in functionality between Safari and Chrome for my overlay feature?

After testing the image hover overlay feature on various platforms such as desktop and Android devices, it has come to my attention that it does not function correctly on Safari. Specifically, the feature does not work on Apple devices like iPhone, iPad, a ...

The style of the button label does not persist when onChange occurs

Encountered an interesting issue here. There is a button designed for selection purposes, similar to a select item. Here's the code snippet: <button class="btn btn-primary dropdown-toggle" style="width: 166%;" type="button" id="dropdownMe ...

CSS: Preserve HTML elements and only conceal the text within an <a> tag

Inside an "a" element, there's an image followed by text as a link. I'm looking to only hide the text of the link without affecting the display of the image. <a href="https://www.example.com/page"> <img src=" ...

Unusual CSS inconsistencies between running on VS Web Server and IIS

My current dilemma involves a discrepancy in the appearance of my site when viewed locally through the visual studio web server (http://localhost:3452/) compared to when accessed on IIS7 (http://server/myproject/). Initially, I suspected a CSS issue causi ...

Tips for avoiding deleting content within a span element when using contenteditable

I am working on an HTML 5 editor that utilizes the contenteditable tag. Inside this tag, I have a span. The issue arises when all text is removed as the span also gets removed. I want to prevent the removal of the span, how can I achieve this? Here is a s ...

What is the best way to share specific links on LinkedIn articles?

When the LinkedIn button is clicked, the entire link does not get passed when the image is clicked. However, the Facebook link works perfectly fine. The LinkedIn button used to work before, has anything changed since then? <div align="center"> < ...