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

Troubleshooting: JSColor Is Failing to Function Properly in Volusion's

Recently, I've encountered some issues with the JSColor plugin () on the Volusion e-commerce platform. Despite having successfully used it before, getting it to load correctly seems to be a challenge. My current task involves working on a test produc ...

javascriptjqueryhtmlvolusion

Resizing a floated div causes the image to break out

My webpage has a container div with two floated left divs inside, positioned side by side. The right div contains a YouTube video and an image. However, when I resize the page, the video and picture flow out of the containing floated div instead of dropp ...

htmlcss

How to place a button in SwiperJs using React

Can anyone provide guidance on how to position the navigation buttons in a manner similar to the image below? The desired layout is for the buttons to appear on the outer edges of the swiper component. You can refer to this demo for more information. htt ...

cssreactjstailwind-cssswiper.js

Utilizing background images in CSS to enhance bootstrap icons

Here is the HTML code snippet I'm working with: <a class="iconContainer" href="#"> <span class="containerIcon chevron-right"/> Test </a> And this is the corresponding CSS code: .chevron-right::befor ...

csstwitter-bootstrapbootstrap-4bootstrap-icons

Leveraging a specific section of an HTML5 CSS3 Bootstrap template in a separate template

As I create my website using a combination of free templates, I often find myself needing to merge elements from different designs. One specific example is wanting to incorporate the "Client Logo Slider" component from template 2 into my original template. ...

javascripthtmlcssresponsive-designjquery-ui-slider

What is the process for moving entered data from one text box to another text box when a checkbox is selected?

I need help with a function that reflects data entered in one text box to another text box when a checkbox is ticked. The checkbox is initially checked and the values should change when it is unchecked and then checked again. Currently, the code is only ou ...

javascriptjqueryhtml

Arrange the child elements of a div to be displayed on top of one another in an HTML document

I am struggling with a div containing code .popupClass { width: 632px; height: 210px; position: absolute; bottom:0; margin-bottom: 60px; } <div class="popupClass"> <div style="margin-left: 90px; width: 184px; hei ...

javascriptjqueryhtmlcss

The tooltip in Bootstrap v2.3.2 is causing words to be cut right in half

The tooltip plugin is set up like this: $("#id").tooltip({ placement: 'top', trigger: 'hover', html: true, container: 'body' }); Is there a way to prevent this from happening? Appreciate any insights. ...

jquerycsstwitter-bootstrap

Menu Selector on the Right Side

I am currently working on a drop down menu and trying to align it to the right using HTML and CSS. Below is an example that I have been referencing: http://codepen.io/anon/pen/RNLmvq Attached here is a screenshot of how the menu appears without the text ...

csshtmldrop-down-menu

In Internet Explorer 7, the combination of having a hasLayout property along with setting the position to relative,

Issue: Encountering a challenge in IE7 with a div containing a gradient and a flyout menu on hover. Although it may seem simple, applying position:relative to the container for accurate menu positioning conflicts with the filter/hasLayout combination. Ch ...

cssinternet-explorer-7

White background with a black border and transparency on an Android device

I'm trying to create a shape that has a white background with a black border. <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <item> <shape android:shap ...

androidcssshapeslayer-list

Why are the HTML links generated by JS not opening in Chrome?

<a href='http://www.xyz.hu/xyz' alt='Kosár' title='Kosár'>Megtekintés</a> Additionally: - A setInterval function refreshes the sibling's content every second, although it should not affect this specific el ...

javascriptjqueryhtmlcss

The merging of several XSL files

Hey there, I have two separate xsl files and an xml file. Is there a way to merge these xsl files into one transform type to create a single HTML output? The first xsl file is called index.html: <?xml version="1.0" encoding="ISO-8859-1"?> <!DOCT ...

htmlxmlxsltxslt-1.0

What is the best way to search for a specific term in Visual Studio Code/IDE without including another term in the search results?

Is it feasible to search for instances in my code where the term "<img" appears without being accompanied by the term "alt="? This would help me locate all image tags that do not have the alt attribute. Can you provide guidance on how this can be achiev ...

htmlvisual-studiovisual-studio-code

Is there a way to perfectly center this image with the rest of my text content?

Seeking assistance in aligning this image to the right alongside other text content. Currently, when the code is executed, the image is pushed down and positioned below the text on the right side. Ideally, I would like the image to be aligned evenly with ...

htmlcssflexbox

Button click not triggering Ajax functionality

I've been working on implementing a simple Ajax function in a JSP using JQueryUI. The goal is to pass two text fields from a form and use them to populate two separate divs. However, when I click the button, nothing seems to be happening. I even tried ...

jqueryhtmlajaxjsp

Create a one-of-a-kind SVG design with a customized blur effect in

Recently, I've been experimenting with SVG effects and animations and stumbled upon a fantastic example of how to apply a blur effect to an SVG path. However, I'm struggling to figure out how to set a different color instead of the default black ...

csssvgsvg-filters

Perfect CSS Menu Hover Effect

I created my own navigation menu, and I'm struggling with one thing... How do I change the A tag color to white when hovering over the ul id "navitemul"? I've tried #lovedating#navitemul:hover #lovedating a {color:white} and other methods, but no ...

csscolorshover

The WP archive.php template is malfunctioning

Having an issue with my website Whenever I try to view the monthly archive () the design appears flipped upside down. I initially assumed that if the archive.php file was missing, WordPress would default to using index.php for the archive page. So why is ...

phpcsswordpressarchive

Achieving and maintaining the center alignment of a horizontal dropdown menu

Struggling with creating a fixed, 100% width nav bar that stays centered when the page is resized? The drop down menu headings are causing issues as they seem to float left instead of staying centered. Not sure how to fix it? Take a look at the live resul ...

htmlcssnavigationcenter