In Firefox, resizable child elements in a flex container cannot be resized

Exploring the realm of flexbox has brought me to a bit of a roadblock with a layout like this one: https://jsfiddle.net/5b0pLgkj/

Everything seems to be running smoothly in Chrome and Safari, where children elements can be resized and fill up the available space within the container. However, Firefox presents a challenge - the flex:1 property doesn't seem to have any effect and resizing children becomes impossible (even though the DOM reflects changes in height).

I've tried using flex:auto, which seems to improve things but at the cost of children not fully utilizing the empty space. Any suggestions or insights on this matter would be greatly appreciated!

Thanks in advance!

htmlcssflexboxfrontend

Answer №1

flex:1; is the same as flex: 1 1 0n;

In browsers like Chrome, using flex:1 versus flex:1 1 0; can yield different outcomes as the flex-basis property is disregarded and only flex-grow and flex-shrink are implemented.

Therefore, when your flex-basis is set to zero in Firefox, it reads it as 0 which may not achieve your intended effect.

To resolve this, use either flex: 1 1 auto; or simply flex: auto;

Flex represents a shorthand for flex-grow, flex-shrink, and flex-basis properties.

For more information, visit: https://css-tricks.com/almanac/properties/f/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

Divs aligned horizontally with uniform height and vertical divider separating them

Seeking a method to create side by side, equal height divs (without resorting to table layout) with a single vertical line separating them. Attempted using flex container per row but the vertical line is fragmented which is not ideal... What would be the o ...

htmlcss

Steps to display a video using a Jupyter widget in a Jupyter Notebook

Imagine I have a directory containing 4 video files (such as "movie1.mp4", "movie2.mp4" and so on). I aim to utilize ipywidgets to enable the user to choose which video they want to watch. Here's an example: import ipywidgets as wd from IPython.disp ...

htmljupyter-notebookipywidgets

Tips for seamlessly integrating full-size images into the slider?

I'm a beginner when it comes to CSS and I am having trouble fitting two images inside my first slider. My goal is to display the full images within the slider, but the width of the images exceeds that of the slider. Below is the CSS code for the slid ...

htmlcss

What is the best way to trigger a JavaScript onclick event for a button that is located within a dropdown menu on an HTML page

I've implemented a feature that resizes the font size within a text area based on the selected font size. It was functioning flawlessly... until I decided to place the font size selection in a drop-down menu, which caused the feature to stop working. ...

javascripthtmlcss

The Javascript function call from the <img src="myFunction()"> is malfunctioning

I am looking to dynamically pass the URL of an image using a JavaScript function. <head> <script> function myFunction() { var str1 = "somepictureurl.png"; return str1; } </script> </head> <body> <img src="myFu ...

javascripthtmljsp

Instructions on how to change the color of specific text to red

Issue: While working on my testimonials page, I am facing a problem with displaying an "ADMIN" tag in red color instead of normal stars for one of the responses by an admin. I have tried various solutions like removing the ending p tag and adding quotes to ...

html

"Generate a series of dropdown menus with choices using either jQuery or AngularJS from a JSON dataset

I'm in need of assistance. I want to generate select dropdowns dynamically based on data retrieved from my REST API, which is in JSON format. How can I dynamically inject these selects into my HTML? Below is an example data structure: JSON data fetch ...

javascriptjqueryhtmljsonangularjs

Troubleshooting Bootstrap 3.0: Issues with nav-tabs not toggling

I have set up my navigation tabs using Bootstrap 3 in the following way: <ul class="nav nav-tabs pull-right projects" role="tablist" style="margin-top:20px;"> <li class="active"><a role="tab" data-toggle="tab" href="#progress">In Pr ...

javascriptjqueryhtmlcsstwitter-bootstrap

Using Google-Prettify with AngularJS

I have been attempting to implement Google Prettify in my AngularJS project. It seems to be functioning correctly on the main page, but once I navigate to another route using Angular (after ng-view), it stops working properly. You can check out the plunker ...

javascriptcssangularjsngroute

Tips for preventing tiny separation lines from appearing above and below unordered list elements

I am attempting to utilize twitter bootstrap to create a select-option style list. How can I eliminate the thin separation lines above and below the list of items? Refer to the screenshot: https://i.sstatic.net/1khEE.png Below is the visible code snippe ...

javascriptjqueryhtmlcsstwitter-bootstrap

Is it a not-so-great idea to use a combination of Bootstrap CSS and Custom CSS for styling

Is it considered bad practice to apply custom CSS on top of standard Bootstrap CSS for a button? Should I completely remove Bootstrap and use only custom CSS? If so, what is the trade-off in terms of performance? Another web developer mentioned that addit ...

htmlcsstwitter-bootstrap-3

Switch up the placement of the boxes by moving them in different directions, such as

I've been attempting to recreate the button movement demonstrated in this link , but I'm having trouble achieving it. Using CSS animation, I can make the buttons move in a straight line, here's what I have so far: <div id="box" style=&ap ...

javascriptjqueryhtmlcss

Using a for loop in JavaScript to fetch and display a specified number of results from an API

Recently, I delved into the world of Javascript and API arrays to grasp the concept of retrieving and manipulating various APIs. The topic of Javascript loops and arrays has been discussed numerous times, both here on StackOverflow and on other platforms. ...

javascripthtmlcssarraysfor-loop

Instructions for turning an HTML table cell into an editable text box

Essentially, I'm looking to enable users to click on the table and edit the text within it. I found inspiration from this Js Fiddle: http://jsfiddle.net/ddd3nick/ExA3j/22/ Below is the code I've compiled based on the JS fiddle reference. I tho ...

javascriptjqueryhtmlhtml-table

What could be the reason why my JavaScript code for adding a class to hide an image is not functioning properly?

My HTML code looks like this: <div class="container-fluid instructions"> <img src="chick2.png"> <img class="img1" src="dice6.png"> <img class="img2" src="dice6.png" ...

javascriptcss

Shift the sideways movement of the triangle symbol

I currently have a main menu in the header with links, accompanied by a moving triangle that changes position as the user hovers from one page to another. While I want to maintain the dynamic movement, I am seeking a smoother transition effect similar to w ...

javascriptjqueryhtmlcss

Hide the popup menu when the user clicks outside of it

I am presenting the following code <!DOCTYPE html> <html> <head> <title>GalacticCraft</title> <link rel="stylesheet" type="text/css" href="style.css" /> <link rel="shortcut icon" type="image/png" href="fa ...

javascripthtmlcss

What is the best way to apply styling exclusively to a child component?

I am currently working on a coding project that involves a parent component and multiple child components. My main goal is to adjust the position of a filter icon by moving it down 5 pixels on one specific child component. The issue I am facing is that no ...

cssangular

There appears to be an issue with the functionality of the Bootstrap toggle tab

Currently, I am facing a toggle issue and having trouble pinpointing the root cause as there are no errors appearing in the console. The problem involves two tabs that can be toggled between - "pay" and "method". Initially, the default tab displayed is "pa ...

javascriptjqueryhtmltwitter-bootstraptoggle

Alignment issues with menus

Could someone help me with aligning my register and login buttons to the right? I will provide any necessary information upon request. Please note that this is just a small part of a larger menu with additional CSS styling. PHP/ HTML: <a href="<?ph ...

phphtmlcssalignmentright-align