inconsistencies observed in flex layout between webkit browsers (Chrome and Safari) compared to moz (Firefox)

I am experiencing unexpected behavior with flex on Mozilla (-moz-) and Chrome/Safari (-webkit-)

Referenced the Mozilla tutorial to understand flex layout

/** {
    border: solid;
    border-width: 0 1px;
}*/

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.tab3 {
    display: flex;
    display: -webkit-flex;
    flex-flow: row;
    -webkit-flex-flow: row;
    -moz-flex-flow: row;
    width: 100%;
    height: 100%;
}

.left-pane {
    display: flex;
    display: -webkit-flex;
    flex: none;
    -webkit-flex: none;
    -moz-flex: none;
    flex-flow: column;
    -webkit-flex-flow: column;
    -moz-flex-flow: column;
    width: 150px;
    height: 100%;
    min-width: 150px;
    background-color: red;
}

.content-list {
    flex: auto;
    -webkit-flex: auto;
    -moz-flex: auto;
    background-color: lightgreen;
}

.left-bottom-content {
    flex: none;
    -webkit-flex: none;
    -moz-flex: none;
    height: 50px;
    background-color: orange;
}

.right-pane {
    display: flex;
    display: -webkit-flex;
    flex-flow: column;
    -webkit-flex-flow: column;
    -moz-flex-flow: column;
    flex: auto;
    -webkit-flex: auto;
    -moz-flex: auto;
    height: 100%;
    min-width: 300px;
}

.right-pane-content {
    display: flex;
    display: -webkit-flex;
    flex-flow: row;
    -webkit-flex-flow: row;
    -moz-flex-flow: row;
    flex: auto;
    -webkit-flex: auto;
    -moz-flex: auto;
    width: 100%;
}

.right-first {
    display: flex;
    display: -webkit-flex;
    flex-flow: column;
    flex: none;
    -webkit-flex: none;
    -moz-flex: none;
    width: 30%;
    height: 100%;
    background-color: green;
}

.right-second {
    display: flex;
    display: -webkit-flex;
    flex-flow: column;
    flex: none;
    -webkit-flex: none;
    -moz-flex: none;
    width: 70%;
    height: 100%;
    background-color: blue;
}

.right-bottom-content {
    flex: none;
    -webkit-flex: none;
    -moz-flex: none;
    width: 100%;
    height: 100px;
    background-color: yellow;
}
<div class="tab3">
            <div class="left-pane">
                <div class="content-list">
                    <h3>4</h3>
                </div>
                <div class="left-bottom-content">
                    <h3>5</h3>
                </div>
            </div>
            <div class="right-pane">
                <div class="right-pane-content">
                    <div class="right-first cell-3">
                        <h3 class="right-heading">8</h3>
                    </div>
                    <div class="right-second cell-4">
                        <h3 class="some-heading">9</h3>
                    </div>
                </div>
                <div class="right-bottom-content">
                    <h3>7</h3>
                </div>
            </div>
        </div>

Screenshot for better understanding: Firefox display https://i.stack.imgur.com/TkZbA.png

Chrome display https://i.stack.imgur.com/vtUcJ.png

Thank you

htmlcsswebkitflexboxmozilla

Answer №1

To avoid using height: 100% in a display: flex class, it is recommended to apply height: inherit to the .right-first and .right-second classes:

View working demo

.right-first {
    display: flex;
    flex-flow: column;
    flex: none;
    -webkit-flex: none;
    -moz-flex: none;
    width: 30%;
    height: inherit;
    background-color: green;
}

.right-second {
    display: flex;
    flex-flow: column;
    flex: none;
    -webkit-flex: none;
    -moz-flex: none;
    width: 70%;
    height: inherit;
    background-color: blue;
}

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

Exploring the wonders of multer in a nodejs application

I am having trouble uploading a file from my webpage to a Node server. Although I can see that the form data is reaching the server's router, No file seems to be saved in the upload folder. What could I be doing wrong? //router section const expr ...

htmlnode.jsuploadmulter

Executing SQL Query on Button Click Event

I am working with PHP and trying to execute a SQL query when a button is pressed. However, the issue I'm facing is that nothing happens when I click the button! I checked the developer console but there doesn't seem to be any action detected when ...

phpjqueryhtmlajax

The art of fluidly positioning elements in Bootstrap columns

My goal is to showcase objects in 3 columns using Bootstrap 4. However, when I implement the code provided, the objects are only displayed in a single column, as shown here: example of 1 column layout. What I actually want is for the objects to be arrange ...

cssangularjstwitter-bootstrapbootstrap-4

Dynamic Data Display

I'm experiencing an issue where the data is not displaying in the table div when using an Ajax call to load the table. The page appears blank upon return, and I have tried using $('#groupTable').load(data); without any success. If anyone can ...

jqueryajaxasp.net-mvchtmlasp.net-mvc-4

Excessive content spilling over the div container

Hello everyone I've been trying to set up a div that includes an image, a title, and some text. I want the image to be aligned on the left side, with the title and text following on the right. However, I'm having an issue where the text is overf ...

htmlcssoverflow

Struggling to locate elements with Python selenium

Just starting out with Selenium and attempting to extract data from a particular website: . This site stores information on hotels across the United States. My main objective is to compile this data into a CSV file where each entry would have a 'State ...

pythonhtmlseleniumweb-scraping

Forming triangles with outlines

Recently, I had the challenge of designing speech bubbles and found a clever technique to create the triangular tip at the end using CSS. By setting the element's width and height to 0 and playing around with borders, you can achieve diagonal shapes f ...

css

Is it possible to create a responsive Material UI tab design?

How can I make the Material UI tab react component responsive? Check out the documentation for MATERIAL UI TAB here If I have multiple tab items with a search bar like shown below, how can I ensure that the input component stretches the whole width of th ...

cssreactjssasstabsmaterial-ui

Delete the span element if the password requirements are satisfied

I am implementing password rules using span elements. I aim to dynamically remove each span that displays a rule once the input conditions are met. Currently, I have succeeded in removing the span related to the minimum length requirement but I am unsure h ...

javascripthtmlangularjsregex

Position three paragraphs in the center of a div container

Is there a way to center 3 paragraphs in a div? I have separate divs for each paragraph and one main div that holds all three nested divs. div.first { font-family: 'Kanit', sans-serif; color: aliceblue; width: 30%; float: left; ...

htmlcss

Selenium encountered an error: Element not found - Could not locate element: {"method":"CSS selector","selector":"*[data-test="email-input"]}

Recently, my application has been encountering an error when trying to log in through a web form. The issue seems to be with locating the email input field: "no such element: Unable to locate element: {"method": "css selector", "s ...

javacssselenium-webdriver

Iframe Interactivity

My goal is to create an interactive iframe that will match the current parent URL (). For example, if I have an iframe pointing to http://www.google.com and click a link within the iframe, it should update the parent URL to , and then load the clicked con ...

javascriptjqueryhtmliframe

Z-index behaving abnormally

I've been working on developing a website and one of the key features I'm trying to implement is a slideout menu that slides horizontally when the mouse hovers over it. To make development easier, I initially set the menu to be fully extended by ...

htmlcss

Tips for creating a cohesive group of HTML elements within an editable area

Imagine having a contenteditable area with some existing content: <div contenteditable="true"> <p>first paragraph</p> <p> <img width='63' src='https://developer.cdn.mozilla.net/media/img/mdn-logo-s ...

javascripthtmlcss

The animation function in A-frame causes entities to vanish when used with D3.js

Working with the animation property in D3.js has been a bit of a challenge for me. When I include the a-animation directly in the HTML section, everything works as expected. <a-box id="box" position="0 1 0" rotation="0 0 0" scale="1 1 1" color="#4CC3D9 ...

javascripthtmlanimationd3.jsaframe

Utilize ngFor in Angular Ionic to dynamically highlight rows based on specific criteria

I'm working on an application where I need to highlight rows based on a count value using ngFor in Angular. After trying different approaches, I was only able to highlight the specific row based on my count. Can someone please assist me? Check out m ...

javascriptcssangulartypescriptionic3

When the dropdown form options in HTML are clicked, they appear disproportionately large compared to the initial select box

Sorry if my wording is a bit off, I'm still relatively new to working with CSS and HTML. I've encountered an issue where the dropdown options appear much larger than the select box itself when clicked. I can't seem to figure out how to fix i ...

htmlcssselectdropdown

Error in Firefox: "Anticipated media feature name, but discovered 'hover'"

I am trying to style elements differently based on whether the client browser supports hovering or not. I came across media features as a solution and implemented it in the following way: /* Supports hovering */ @media (hover: hover) { ... } /* Does not ...

cssfirefoxhovermedia-queriesinteraction-media-features

Tips on toggling the visibility of a div using jQuery and CSS via a toggle switch

Hey there, I need some help with toggling the opening and closing of a div when clicking on a toggle switch. $('.tog').on('click', function() { $('.cntr').show(); }); .switch { position: relative; display: inline-bloc ...

jqueryhtmlcss

Transferring the "key" and "values" data from a JSON object to a perl script

I am currently working on developing a shopping cart application. All the items stored in the shopping cart are kept within a JavaScript object called Cart, with data structured like {"sku"=quantity}. For instance: Cart={"5x123"=1,"5x125"=3} At this ...

javascripthtmlajaxperl