What could be causing the flex item to overstep its bounds in the mobile view?

Just starting to dive into the world of CSS and HTML, I am currently experimenting with FlexBox. I have encountered an issue with my layout and I can't seem to figure out why my second div (.rightContainer) is overflowing its parent. I have tried removing the height property, but that did not resolve the issue.

<!DOCTYPE html>
<html lang="en>
<head>
    <meta charset="UTF-8>
    <title>FlexBox Test</title>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <div class="container">
        <div class="leftContainer">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="rightContainer>
            <div class="banner"></div>
        </div>
    </div>
</body>
</html>

https://jsfiddle.net/pvvqwrb4/3/embedded/result/

htmlcssmobilelayoutflexbox

Answer №1

When viewed on mobile (@media(max-width: 600px)), the .rightContainer flex item extends beyond the boundaries of the flex .container due to the following reasons:

  1. The .container is constrained by a height: 800px.

    To address this, the first step is to change height to min-height:

    .container {
     border: 10px solid lightcoral;
     margin: 0 auto;
     width: 70%;
     min-height: 800px; /* adjusted */
     display: flex;
}

  2. flex: 1 1 0 is applied to .rightContainer.

    This directive makes the flex item flexible within the available space in the container. However, with a height: 800px set on the container and flex: 0 1 auto on .leftContainer, there is no leftover space in the container.

    Instead of flex: 1 1 0, consider using flex: 1 1 auto, which sizes the flex item based on the content it holds.

    .rightContainer {
      background: peachpuff;
      margin: 10px 10px 10px 5px;
      flex: 1 1 auto; /* adjusted */
}

    DEMO

    In summary:

    • flex: 1 1 0 sizes the item according to available free space in the flex container.
    • flex: 1 1 auto sizes the item based on its content's width or height properties.


    For more information, refer to the flexbox specification: 7.1.1. Common Values of flex.

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

Applying CSS to prevent elements from overlapping by adjusting their vertical positioning

I need some help with a CSS formatting question. My current setup works well, the menu's position adjusts based on screen size to be centered both vertically and horizontally. However, I'm facing an issue where elements start overlapping if the v ...

htmlcss

Preventing default events on a jQuery slider: enhance user experience

I'm currently experimenting with the superslides library for my project, and I have been trying to implement custom effects on the animations. This is how I attempted to do it: During the beforeChange event, I want to prevent the event from propa ...

jquerycss

Is it possible to stack divs horizontally in a liquid layout while allowing one of the widths to be dynamic?

This is the code snippet and fiddle I am working with: http://jsfiddle.net/hehUt/2/ <div class="one"></div> <div class="two">text here text here text here text here text here text here text here text here text here text here text here te ...

csscss-float

I am encountering an issue where the function send_mail is receiving multiple values for the argument fail_silently

https://i.sstatic.net/QUt2A.png My small program encountered an error when attempting to email information from a form. Here's the type of error I got: I'm writing a simple little program ... when I'm trying to email this info. from that fo ...

htmldjangoformstemplates

Breaking down a jQuery array into separate JSON objects

Hi there, I am currently working on constructing a post request. Here is the format I need to send: const data = { categories: [ { id: 9 }, { id: 14 } ], } However, what I have is ["29", "23", "22&quo ...

htmljquery

Finding the current HTML page URL in Ionic 2: A step-by-step guide

Can the URL of the current HTML page be obtained and then converted to PDF using the cordova-pdf-generator package? ...

htmlpdfnpmionic2

Strategies for modifying the title attribute within an <a> tag upon Angular click event

I am attempting to dynamically change the title attribute within an anchor tag upon clicking it. The goal is for the title attribute to toggle between two states each time it is clicked. Currently, I am able to change the title attribute successfully upon ...

htmlangulartypescript

AngularJS - Custom directive to extract a property value from an object

Currently, I am using the following for loop to retrieve the parent category: angular.forEach(queryTicketCategories, function(category) { if(category.id === $scope.ticketCategory.parentId) { $scope.parent = category; } }); I am looking fo ...

javascripthtmlangularjsangularjs-directive

Execute PHP script through jQuery request within the context of a Wordpress environment

I want to replicate a specific functionality in WordPress. In this functionality, jQuery calls a PHP file that queries a MySQL table and returns the result encapsulated within an HTML tag. How can I achieve this? <html> <head> <script ...

javascriptphpjqueryhtmlwordpress

Issue with width loss when using Bootstrap 4 aligning center self in IE11

I'm having trouble centering my .row element along the y-axis in IE11. Despite my efforts, it doesn't seem to be working. Here is my HTML: <section class="home-section"> <div class="container home-section-inner d-flex"> ...

twitter-bootstrapinternet-explorerflexboxbootstrap-4internet-explorer-11

Positioning Backgrounds with Padding in DIV Elements

I am trying to figure out how to add a check mark next to text in a button with specific styling. I have managed to get the check mark aligned properly using Background:left center, but I also want to add padding and adjust spacing. Is there a way to achie ...

javascripthtmlcssbackgroundjsfiddle

What is the best way to eliminate a white border that appears only on my ThreeJS website when viewed on a mobile device?

I initially suspected a potential issue with resizing the window, so I created a JavaScript function to handle it. However, that did not resolve the problem. Any other ideas on how to troubleshoot this? // If the user resizes the window, update camera a ...

javascripthtmlcssthree.js

Angular Oops! We ran into a small hiccup: [$injector:modulerr]

I am facing an issue with an angular js error angular.js:36 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.19/$injector/modulerr?p0=app&p1=Error%3A%20…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.19%2Fangular.min.js%3A18%3A139) ...

javascripthtmlangularjswordpress

I cannot understand why I keep receiving <input type="email" value="required"> when all I want is <input type="email" value="" required>

Currently, I am working with PHP code and here is my complete PHP code: echo "<input type=\"email\" class=\"profil_input_text form-control\" name=\"user_email\" pattern=\"^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(& ...

phphtmlinputrequired

Disabling the scrollbar on a modal and enabling it on a custom div within the modal

Looking to create a bootstrap modal with a unique layout? Interested in having two columns that can be scrolled separately? body, html { font-size: 10px } <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_ ...

csstwitter-bootstrapbootstrap-modalbootstrap-5

What causes the code following the </html> tag to be shifted in front of the </body> tag? Is there a noticeable improvement in performance

After exploring various Stack Overflow posts like this particular SO question, I came across an unconventional Google recommendation on CSS optimization. This recommendation suggested deferring CSS loading with markup that looked like this: <d ...

htmlcssvalidationdomcross-browser

Manipulate the value of an HTML element's style parameter with jQuery

How do I change an element's style property using jQuery? This is the HTML code I am working with: <div id="template" style="width:200px; height:200px; border:none;">blabla...</div> I attempted to do this: $('#template').attr ...

javascriptjqueryhtmlcss

Enhancing React components with dynamic background colors for unique elements

I am encountering an issue while using a map in my code. Specifically, I want to set the background of a particular element within the map. The element I am referring to is "item .title". I aim for this element to have a background color like this: https:/ ...

javascriptcssreactjsreduxreact-redux

How do I switch the background-image on li hover and revert it back when I move off the li element?

Looking to update the background image of a div upon hovering over a li element? Check out this example here. So far, I've got that part working fine. But now I want the background picture to revert back to its original CSS when I move away from the l ...

javascriptjqueryhtmlcssbackground-image

Styling Process Steps in CSS

Just starting out with CSS! I'm looking to replicate the Process Step design shown in the image. https://i.stack.imgur.com/Cq0jY.png Here's the code I've experimented with so far: .inline-div{ padding: 1rem; border: 0.04rem gray ...

javascripthtmlcss