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.

https://i.sstatic.net/zp75r.png

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

What's preventing my link from opening?

I've written this code for two tabs: <li> <a href="#gallery_place" role="tab" data-toggle="tab"> <i class="fa fa-picture-o"></i> <?php _e("Gallery", ET_DOMAIN); ?> </a> </li> <li> <a href ...

phpjqueryhtml

sending live video from a Python server to a browser-based client

Is there a way to stream a video from a python server to an HTML page web client (Node.js)? In my Node.js web project, I am currently using Python to write frames and JavaScript to read them. However, I am facing limitations with both frame rate and resol ...

pythonhtml

Customizing the appearance of ASP.NET file uploader for various sizes

Has anyone successfully changed the width of the ASP.NET file uploader? I attempted by adding the CssClass, but it did not work. Is there an alternative method to adjust the width? Thanks in advance. ...

asp.nethtmlfile-uploadcss

The Verdana font in Microsoft Word appears with a distinct rendering when converted to an HTML-based

I'm currently working on generating a PDF from an HTML template. Our customer provided the template they previously used in Word, and they require the font to be Verdana. The challenge I'm facing is that Verdana looks smaller and has a different ...

htmlcssasp.net-corefontsselectpdf

The visibility toggling with ng-hide/ng-show is not functioning as expected within another ng-hide/ng-show in Chrome. Upon first triggering the visibility, there appears to be a

I have encountered a situation where an edit input with a suggestion list is present. When I make an entry on ng-change, the list displays relevant suggestions and throws an exception if no data is available. However, in Chrome, I face an issue where the l ...

angularjsgoogle-chromeng-show

Application utilizing electron technology featuring various tabbed browsing windows connecting to secure websites

Currently, I am in the process of developing my own unique version of a platform similar to using Electron technology. The objective for this app is to provide users with the ability to view multiple URLs simultaneously, such as and , through a tabbed i ...

javascripthtmlnode.jselectron

Issue encountered when sending information to asmx web service via ajax and displaying the result on an HTML page with a javascript function

I have developed an ASMX web service that looks like this: [ScriptService] public class CurrencyData : System.Web.Services.WebService { [WebMethod] public string DisplayCurrency(double amount, string sign ,string style) { swi ...

javascriptjqueryhtmlajaxweb-services

Tips for retaining the value of a variable when the page is reloaded

I need to store the value of the variable loggedIn, as it determines the behavior of a function in appComponent.html. Can you explain how I can achieve this? Template of app component: <li class="nav-item"> <a class ...

javascripthtmlangulartypescriptangular6

Having difficulty setting up multiple buttons to share the same function in jQuery using HTML

After clicking a button, my code dynamically adds content to a div and inserts buttons with names like "teamReq_"+index+"_AddYear" into the document (where index is a number retrieved from a hidden input field). If these buttons are spammed, multiple divs ...

javascripthtml

The Google Docs viewer is displaying an empty screen

I have been utilizing the Google Docs viewer on my website: <div class="embed-r embed-responsive-a"> <iframe class="embed-responsive-it" src="https://docs.google.com/viewer?embedded=true&amp;url=http://LINK.PDF"></iframe> </div& ...

javascripthtmlcsspdfgoogle-docs

Transforming the style of a particular element within React using Array().fill().map's method

Looking for a way to dynamically change the color of an array in React + styled jsx? Let's say you want to change the color when the number of elements in the array is a multiple of 4 (e.g. the index is 4, 8, etc.) Is there a clever solution to achi ...

cssreactjs

Ways to eliminate bottom margin of text area in vuetify

Greetings, I am facing an issue with the following code snippet: <v-text-field :rules="rules" v-model="exam.title" class="exam-title ma-0 pa-0" ></v-text-field> <v-text-field class="exam-title ma-0 pa-0"></v-text-field& ...

cssvue.jsvuetify.js

Tips for adjusting the size of nav-pills when collapsing with bootstrap 5

I'm attempting to utilize Bootstrap to create active classes that display a nav-pill/container around the active section of my webpage. It works well on larger screens, but on smaller screens with the hamburger menu active, the nav-pill stretches acro ...

htmlcssbootstrap-5

Technique for adding an element's attribute to a span based on the element's class

I am aiming to display a maximum of three selections within my h4 tag, based on the number of options that the user clicks. For instance, the h4 tag should show 'Department1, Department 2,' if no elements are selected or have the class active, i ...

javascriptjqueryhtml

Emphasizing a full row within a table is a way to draw attention

I have a piece of HTML/CSS code that successfully underlines the text in a single table cell when hovering over it. However, I want to extend this effect to underline all text in a row of cells, rather than just one cell. It's not necessary for the en ...

htmlcss

Identifying and locating white-colored text within an HTML document

My HTML file has the following structure: <HTML> <HEAD> <style> .secret { background-color: black; color: black; } </style> </HEAD> <BODY ...

pythonhtml

Troubleshooting problem with Materialize CSS in UI router

Incorporating Materialize CSS along with Angular's ui.router for state management and HTML rendering has led to a challenge. Specifically, the Materialize Select component is not initialized upon state changes since Materialize components are typicall ...

javascriptangularjshtmlangular-ui-routermaterialize

How can I make the row color of a jQuery datatable change when the row is selected?

One of my challenges involves implementing a jquery dataTable (view here) where each row contains a checkbox. I want the row's color to change when the checkbox is checked. This is the approach I attempted: <table id="tabellaOrdinaFarmaci" class=" ...

javascriptjqueryhtmlcssdatatable

Inserting multiple values into my PDO database

I am facing an issue with my code that I need help with. I am trying to include more data than just my :SteamID in my database. This function/PDO is currently executing every time someone visits my site. Working code: /*Check possible existing data*/ $odb ...

phphtmlmysqldatabasepdo

Jquery is failing to handle multiple inputs

I am currently working on a system that can handle multiple Yes/No questions. However, every time I try to submit the form, I encounter an error in the console that I cannot identify, and no data is returned from the query. Previously, I used an Array to s ...

javascriptjqueryhtmlajax