Shiny Chrome, Flexible Flexbox, and plump div elements

Looking to enhance my understanding of flexbox.

Encountering a display issue in Chrome where the right column is too wide and the left column is too skinny, while it displays correctly in Firefox.

Any suggestions on how to fix this for Chrome?

.child {
  border: solid 1px;
}
.left {
  width: 100px;
}
.container {
  display: flex;
  display: -webkit-flex;
}
<div class="container">
  <div class="child left">
    I'm left!
  </div>
  <div class="child right">
    And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right
    and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm
    right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm
    right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat! And
    I'm right and fat! And I'm right and fat! And I'm right and fat! And I'm right and fat!
  </div>
</div>

htmlcssgoogle-chromeflexbox

Answer №1

The layout works differently in Firefox and Chrome for this snippet. In Firefox, the left column is handled correctly while in Chrome, the right column is too wide and the left column is too skinny.

However, upon closer inspection, it appears that the layout doesn't actually work as expected in Firefox. The computed width of .left in Firefox is approximately 84px, not 100px as intended.

In Chrome, the layout just shrinks to fit the content, showing how different browsers handle flex items' default minimum size differently.

To ensure cross-browser compatibility, it's recommended to define the flex-shrink property.

Instead of setting the width like this:

.left { width: 100px; }

You can try using the following approach:

.left { flex: 0 0 100px; } /* don't grow, don't shrink, width is 100px */

View Demo

For more information on the flex property, refer to these resources:

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

Tips for centering text inside a div using a separator

During my side project, I decided to use the angular material divider but encountered issues with aligning the text correctly. https://i.stack.imgur.com/zg1mu.png The problem can be seen in the image provided - the text on the right side is not aligned b ...

htmlcssangularangular-material

Choosing a menu option with jQuery

Can someone help me with making a menu option selected in HTML? Here is my code: <ul class="ca-menu"> <li> <a href="#"> <span class="ca-icon"><img src="images/home.png" ...

jqueryhtmlcss

What causes the discrepancy between 1px and 0px padding on floating divs in various web browsers?

Take a look at this HTML example - the only variation is padding-top:0px; vs padding-top:1px; However, in the second example, the div is shifted by a completely different amount? <div style="clear: both; margin:0px; padding-top:0px; border: 0px"> ...

htmlcss

Blur effect on backdrop-filter causing shadowy inset borders (specific to Chrome and Windows)

Note: The issue mentioned below has been resolved in the latest version of Chrome (119.0.6045.200). While transitioning on backdrop-filter, I have observed a dark inset shadow that is only visible during the transition. This behavior seems to occur only ...

csscss-transitionscss-filters

What methods can be used to cloak JavaScript functions from the end user?

Looking to utilize jQuery AJAX calls? Here's an example: function addNewTeacher(){ $.ajax({ type: "POST", url: "/actions/dboss/newteacher.php", data: "uname=" + $("#newteacheruname").val() + "&upass=" + $("#new ...

javascripthtmlajaxfunction

Struggling to align block elements correctly after changing them to inline

I've been trying to align this paragraph while keeping the navigation menu and logo in their correct positions. I attempted to make everything inline, but that didn't work. Then I experimented with the float property, which only made things worse ...

csshtmlhyperlink

Modify the color of drop-down menu links

Recently, I set up a drop-down menu containing links. Initially, when hovering over the names in the menu, they would change color and display the drop-down. I had successfully made all the names golden, with the hovering name turning black while display ...

htmlcssdrop-down-menu

Issue with horizontal scrolling in ng-scrollbars occurs when scrolling from right to left

We are currently developing a single page application that supports two languages, one being right to left and the other left to right. For scrolling functionality, we have implemented ng-scrollbars, an Angularjs wrapper for the malihu-custom-scrollbar-pl ...

javascriptjqueryhtmlcssangularjs

"Is there a way to target an element within another element that has inline styles using

What is the best CSS strategy for targeting elements with inline styles? How can I focus on the first span but exclude the second using only CSS? If that's not achievable, is it possible to accomplish this using jQuery? http://jsfiddle.net/TYCNE/ & ...

htmlcsscss-selectorsinline-styles

Oops! Smarty encountered a fatal error that wasn't caught

An error occurred while processing the template file "C:\xampp\htdocs\eventos\libs\templates\teste.tpl" on line 9. The error message states: Fatal error: Uncaught exception 'SmartyCompilerException' with message &apo ...

phphtmlsmarty

Placing the date of each blog post at the end of the excerpt

Currently, there is a grid section on the homepage of our site showcasing the two most recent blog posts. I am looking for a Javascript solution to relocate the date to the bottom of each block, outside of the border. For reference, you can visit the follo ...

javascriptjqueryhtmlcsswordpress

Responsive Design and Advertising with CSS Media Queries

For my application, I am utilizing Twitter's bootstrap (responsive) css. My goal is to incorporate banner ads in the sidebar section. However, due to different media query settings, the sidebar's width will vary, resulting in the need for the ban ...

csstwitter-bootstrapresponsive-designadsbanner-ads

Prevent users from downloading images

I'm trying to prevent image downloads by regular users, like so: <div style="background-image: url(img.jpg); background-size: cover; background-repeat: none; "> <img src="wtrmrk.jpg" style=" opacity: 0; " /> </div> If the img.jpg s ...

htmlcss

How to Keep Bootstrap 3 Accordion Open Even When Collapsed

I am in the process of building an accordion group with bootstrap 3. Here is the code I have so far: <div id="accordion" class="panel-group"> <div class="panel panel-default"> <div class="panel-heading"> <div class ...

javascriptjqueryhtmlcsstwitter-bootstrap

What steps can be taken to ensure that an element does not exceed the boundaries of its grandparent container?

I am facing a unique scenario where I have a div with dynamic content, and inside it is another div containing a growing list. The challenge is to allow the internal div to expand until the root div reaches its maximum height, after which overflow should ...

htmlcss

The image source is visible in Vue.js, but unfortunately, my picture is not showing up

Below is the code and script that I have: <template> <div class="tasks_container"> <div class="tasks_content"> <h1>Tasks</h1> <ul class="tasks_list"> ...

javascripthtmlcssvue.jsdom

Is it possible to combine margin auto with a transform on the left simultaneously?

While examining a webpage, I noticed a positioning issue and decided to remove some CSS code to determine the root of the problem. It appears that the navbar has a 1px gap on the left side from the edge of the screen. After removing the last two lines of c ...

css

How can you employ moment.js to display the most recent update time of mongoDB/mongoose?

I am facing an issue with displaying the last date/time when any entry in my table was edited and updated using moment.js. It seems to be updating the date/time in real-time rather than only showing when a database entry was modified. How can I ensure tha ...

htmlnode.jsmongodbmongoosemomentjs

In the Bootstrap multiselect feature, users will be able to choose whether to display an image or selected text

Is there any way to display an image by default instead of options? Code: <select id="example-post" style="width:120px;!important;" class="footerSelect" name="multiselect[]" multiple="multiple"> <opti ...

javascriptjquerycsshtmltwitter-bootstrap

Having issues with object-fit: cover not functioning properly in Safari browser

Encountering a browser support issue at the moment. Everything is functioning as expected on Firefox and Chrome, but Safari is causing problems with images. Currently, the image size is set using "object-fit: cover" and working properly on Chrome/Firefox. ...

csssafaricross-browser