There is an overflow issue where content on the left side is being hidden when the overflow is set to auto

I am attempting to display a content box consistently on both desktop and mobile by utilizing a fixed width and overflow property.

:root {
    --box: rgb(20, 33, 150);
    --box1: rgb(55, 75, 255);
    --background: rgb(147, 158, 255);
}

body {
    -webkit-font-smoothing: antialiased;
    font-family: "Open Sans";
    font-weight: 400;
    background-color: var(--background);
}

.squad-table>.col-12 {
    border: 2px solid var(--background);
    display: flex;
    justify-content: center;
    overflow-x: auto;
}


.wrapper {
    width: 1000px;
    display: flex;
    justify-content: space-between;
}

.wrapper>.row {
    width: 500px;
    margin:3px; 
}


.box {
    background-color: var(--box);
    font-size: 1.2rem;
    color: #fff;
}

.squad-box {
    padding-bottom: 15px;
    padding-top: 15px;
    background-color: var(--box1);


}

.count-box {
    text-align: left;
    -webkit-border-top-right-radius: 30px;
    -moz-border-radius-topright: 30px;
    border-top-right-radius: 30px;
    background-color: var(--box1);

}


.team-box {
    display: flex;
    justify-content: center;
}

.team-box-inner {
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--box);
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet"> -->
    <!-- <link rel="stylesheet" href="css/bootstrap.min.css"> -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
        crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css">
    <title>Learn HTML</title>
</head>

<body>
    <div class="container">

        <div class="row test">
            <div class="col-12 mx-auto">
                <h1 class=" display-1 text-center">Squad</h1>
            </div>
        </div>

        <div class="row squad-table">
            <div class="col-12">
                <div class="wrapper">

                    <div class="row box text-center">
                        <div class="col-4 count-box">Team 1</div>
                        <div class="col-8 space-box">space</div>
                        <div class="col-12 squad-box">
                            <div class="row">
                                <div class="col-3 team-box">
                                    <div class="team-box-inner">name</div>
                                </div>
                                <div class="col-3 team-box">
                                    <div class="team-box-inner">name</div>
                                </div>
                                <div class="col-3 team-box">
                                    <div class="team-box-inner">name</div>
                                </div>
                                <div class="col-3 team-box">
                                    <div class="team-box-inner">name</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row box text-center">
                        <div class="col-4 count-box">Team 1</div>
                        <div class="col-8 space-box">space</div>
                        <div class="col-12 squad-box">
                            <div class="row">
                                <div class="col-3 team-box">
                                    <div class="team-box-inner">name</div>
                                </div>
                                <div class="col-3 team-box">
                                    <div class="team-box-inner">name</div>
                                </div>
                                <div class="col-3 team-box">
                                    <div class="team-box-inner">name</div>
                                </div>
                                <div class="col-3 team-box">
                                    <div class="team-box-inner">name</div>
                                </div>
                            </div>
                        </div>
                    </div>

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



    <!-- JS files -->
    <!-- <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
        crossorigin="anonymous"></script>
    <script src="js/bootstrap.min.js"></script> -->
</body>

</html>
The issue here lies with the overflow property causing a portion of the content to be hidden on the left side when the screen width is less than 1000px. It's puzzling and I'm uncertain if it's related to bootstrap, flexbox, or the overflow itself.

Just to note, I utilized bootstrap version 4.1.3

htmlcssflexboxbootstrap-4overflow

Answer №1

You simply update this 

.team-group>.col-12 {
    border: 2px solid var(--background);
    display: flex;
    justify-content: left;
    overflow-x: auto;
}

By changing it from being centered to left-aligned.

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

issue with padding-bottom in Firefox and Internet Explorer 11

JsFiddle CSS body, html { background: violet } * { margin: 0; padding: 0 } .fixed { height: 100%; width: 300px; background: #fff; right: 0; position: absolute; top: 0; display: -webkit-box; display: -moz-box; display: -ms-flexbox; ...

htmlcssfirefoxflexboxcross-browser

The astonishing font-icon animation feature is exclusively functional on code-pen

I have a problem with a font-icon animation code. When I run it on my local server, the animation doesn't work. It only works on http://codepen.io/TimPietrusky/pen/ELuiG I even tried running it on http://jsfiddle.net/qjo7cf3j/ @import url(http: ...

cssfont-awesome

What steps can I take to make my animation work in the opposite direction as well?

I'm currently working with an angular slider that is set to TRUE/OPEN by default. The issue I am facing is that while I am able to slide it using angular animations in one direction, I am unable to see the transition when sliding it back. Any assistan ...

javascripthtmlangulartypescript

Filter out <li> elements by child data attribute

Below is an example of the HTML code I am working with: <li><div class="abc"><a href="https://www.google.com" data-test="male">John</a></div></li> <li><div class="abc"><a href="https://www.facebook.com" d ...

javascripthtml

Is there a possible method to obtain a smartphone number from a website?

Seeking a solution to retrieve the phone number of a device using HTML 5, JavaScript, or similar technology. Recently, I successfully obtained the coordinates of the device by incorporating the following JavaScript code: <!DOCTYPE html> <html> ...

javascriptandroidhtml

What is the Best Way to Display an Image Field from a Django Model in Templates?

I'm having trouble displaying the uploaded image in the project template. This is the current state of my code: projects.html {% extends "base.html"%} {% block content%} <h1>{{ project.title }} HELLO</h1> <div class=" ...

pythonhtmldjango

What are the steps involved in changing a dropdown menu?

My current bootstrap dropdown list has been causing some issues, specifically with the 'Log out' link not working properly. The 'Logout' button seems to be functioning correctly, but for some reason the other one is not. Can someone ple ...

htmlcssbootstrap-4thymeleaf

Is there a way to deactivate the spin buttons for an input number field?

Is there a way to create an input element with type number in Vue using createElement() in TypeScript and then disable the spin buttons for increment and decrement? I attempted to use the following CSS: input[type=number]::-webkit-inner-spin-button, input ...

htmltypescriptvue.js

Disregard any labels when it comes to clickable areas for mouse events

Here is a simple example in JSFiddle where a text is displayed over an image inside a div element. Depending on where the cursor hovers, it can exhibit three different behaviors: pointing hand over the image, allowing text selection over the content of the ...

javascriptjqueryhtmlcss

The Border Radius Problem in Google Chrome

Greetings! I am currently working on a project for a website and have encountered an issue with the gallery on the projects page. The images are meant to be displayed as circles, and when hovered over, they should maintain their circular shape and have a b ...

cssgoogle-chromeoverflowhidden

Utilizing a jQuery plugin for input file validation

This code is functioning properly, however the file field is not being validated. All input fields are successfully validated by this plugin except for the file type field. I believe there may be something missing in my implementation, so please help me de ...

phpjqueryhtml

avoid triggering the on hover state

When working with jQuery, I have a CSS style targeting a specific div: div.right-sm:hover{background-color: blue} Now, I am trying to prevent the hover effect using jQuery: $(this).parent('div').removeClass('right-sm:hover'); Howev ...

jquerycss

There seems to be a malfunction in the functionality of my Django template navbar

Within my project, I am utilizing two templates named base.html and contact.html. The contact.html template extends the base.html template, and these are the only two templates in use. When I navigate to the blog or about section by clicking on them, the p ...

htmldjangodjango-viewsdjango-urls

Is it possible to achieve a smooth transition to the right using CSS

I'm attempting to create a sliding box effect from left to right using only transitions, similar to this: #box { width: 150px; height: 150px; background: red; position:absolute; transition: all 2s ease-out; right:auto; } .active{ bac ...

javascripthtmlcss

Managing a fixed footer in an Android webview to prevent it from obstructing an input field when the soft keyboard appears

I am working with a webview that contains a React app, not React Native. The webview features a login page with two input fields and a fixed footer. However, when one of the input fields is focused, the footer moves up and covers part of the input field, ...

androidhtmlcssreactjswebview

Troubleshooting Problem with CSS Display in Spring Security 3.2

After deciding to integrate 'Spring security 3.2.0' into my current web application, which was originally developed without Spring and utilizes Primefaces & EJB 3, I encountered a challenge. Upon starting the basic configurations, I noticed that ...

javacssspringprimefaces

Tips for preserving login status even after the browser is shut down with the help of JavaScript

I need help with maintaining a user session in my chat application even when the browser is closed. After users log in for the first time, I want their credentials to be remembered by the browser (I'm currently using local storage). How can I ensure ...

javascripthtml

Tips for stopping Razor from altering HTML strings

In order to display the body of a message, which is a piece of HTML, using Razor, follow these steps: Within your cshtml file, include the following code: <div> @message.Body </div> For example, if the content of message.Body is: <p&g ...

c#htmlasp.net-mvcrazor

Achieving overlapping div layouts with CSS styling

Displayed above are 4 different divs: red, green, and blue. I am seeking to have the blue div positioned directly below the green div, which contains the text "JACKSON". Additionally, I do not want the green div to expand beyond its content, nor do I want ...

htmlcss

What are the different approaches for creating a website that adapts to different screen sizes and devices

The popularity of responsive web design is growing rapidly. While many recognize Twitter Bootstrap as a top framework, there are other options worth exploring. Several impressive examples of responsive websites, such as Smashing Magazine and CSS Tricks, ...

htmlcssresponsive-designmedia-queries