IE11 causing overflow issues with flex item set to 0% basis

This straightforward example can be viewed in the following codepen link: http://codepen.io/anon/pen/Mazjyv. It showcases a button that acts as a flex item with a flex-basis set to 0%.

While other browsers handle the content within the button container without overflow issues, IE11 seems to have trouble with this.

Do you have any insights or ideas on why this discrepancy occurs?

Answer №1

The issue lies in this particular guideline:

button
{
    flex: 0 0 0%;
}

This directive instructs the button element to abide by the following rules: do not expand, do not contract, start with a main size of 0.

A more suitable approach would be:

button
{
    flex: 1 0 0%;
}

On a side note, it's worth mentioning that the text overflow issue was also present in Chrome 46.

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

Display tooltip upon hovering

Can someone help me with my dot navigation tooltips? I've managed to make them visible, but now I want them to only appear on hover. What am I missing? I've experimented with display: none and visibility but when I tried this code: span.tooltip ...

Can the ID attribute be used in the closing tag of an HTML element

Could this code be improved by properly closing the div with an ID: <html> <body> <div id="main"> </div id=main"> </body> </html> ...

Tips for optimizing SVG icon caching on an external CDN without encountering flash of missing icons

I've mastered the process of getting SVG icons to load on my website, but I am facing a challenge in meeting all the criteria listed below: Need to be able to use SVG icons in CSS Avoid any flash of missing icons (FOMI) Minimize the initial page siz ...

What is causing variations in the sizes of my HTML tables?

I am having some issues with a particular HTML snippet that I have included below: <table> <tbody> <tr> <td><table>...</table></td> <td><table>...</table></td> <td><tab ...

Creating Dynamic Web Design: Horizontal Scrolling Window and Adaptive HTML Content

After spending countless hours researching online, I am still unable to find a solution for responsive web design that maintains the aspect ratio of both the window and HTML body. Here are examples of what I'm looking for: original view, stretched le ...

When the browser window is minimized, the top section of the website becomes concealed

For the past few weeks, I have been working on creating a new website. The progress is looking good overall, but there is one issue that I have encountered. When viewing my website in a browser window smaller than the actual webpage size, the top menubar ...

Creating tags in HTML and displaying them on a webpage

I have a code that sends a message from a textarea after completion tags are entered as I wrote. The desired output should be: <h1> Thanks </h1> The expected output is: Transmitter Thanks instead of <h1> Thanks </h1> ...

Scrollable Turbo Table experiencing a problem with the PrimeNG filter dropdown

When using PrimeNG Turbo Table, I am facing an issue where the filter dropdown is getting placed inside the scrollable table. The dropdown works perfectly fine without the scrollable table. You can see it in action here. However, when the table is scroll ...

How to prevent a nested element from inheriting the parent's styling

<ul id="login"> <li><a href="#">User></a></li> <li><a href="#">Logout></a></li> </ul> My menu and sub-menu are functioning correctly, however, the last item that came from a Partial ...

I'm having trouble displaying the result of my calculation in the code. Could it be because I forgot to include an output tag?

I am attempting to develop a Miles Per Gallon (MPG) calculator using Javascript. However, I'm encountering difficulties with displaying the results once the "Calculate" button is pressed. <html> <head> <title> MPG Calculator </ti ...

What steps can be taken to ensure that the design of this page flows seamlessly?

Interested in a design similar to this https://i.sstatic.net/wbXo2.jpg <!DOCTYPE html> <html lang="en> <head> <meta charset="UTF-8> <title>Title</title> <style> html, body { height: 100%; margin: 0; ...

The CSS styling is not applying correctly to a particular page

Having a minor CSS issue here. I am attempting to change something for a specific page or post, like in the case of wanting to change the background color of the entry content of page number 2458. I've managed to get that working with the following co ...

Modifying the color of the highlighted selection in a dropdown select box

Is it possible to change the blue highlight on this dropdown to gray? Check out this demo of a select box I am aiming to alter the highlight color to gray, can someone help me achieve this? select { border: 0; color: #EEE; background: transparen ...

updating the background image in CSS after uploading a photo using Ajax

Whenever I click on an element, it triggers an input dialog that allows me to upload a photo. The server then responds with a JSON OBJECT containing 4 items: NAME, TYPE, HEIGHT, WIDTH. My goal is to refresh the element's background with the newly upl ...

Is it necessary to restart the IIS Site when altering the contents of index.html?

I am currently working on updating a website that runs on a Custom Designed CMS with files using the .asp extension. The site seems to be quite dated and is hosted on an IIS Server, which I do not have direct access to. The user has requested some changes ...

Build server running Windows 2012 R2 with IE 11 Selenium experiencing an UnexpectedJavaScriptError

Currently, I am developing automation tests using C# and .NET 4.5 along with SpecFlow + NUnit. In my ASP.NET MVC project, I am utilizing Kendo MVC controls. There is a specific page where we use a JavaScript variable to signify that all client-side Kendo ...

Notification box appearing on the homepage

I created a landing page featuring various products. Each product is accompanied by a description and price. When you click on a product, a "popup window" should appear displaying the picture and description. My concern is that if I have numerous product ...

Emphasize a portion of a text / Apply formatting to a variable

I am facing an issue where I need to format only the date in a specific string. I have managed to extract the date and store it in a variable after isolating it from the original message. <div class="foo"><p> Click here now and get by January ...

Steps to implement an image zoom function triggered by a button click

I'm working on a school project that requires me to use only html, css, and javascript for creating a website. Currently, I'm designing a landing page with a button that will navigate the user to another page. My goal is to have the background im ...

Programmatically simulate a text cursor activation as if the user has physically clicked on the input

I have been attempting to input a value into a text field using JavaScript, similar to the Gmail email input tag. However, I encountered an issue with some fancy animations that are tied to certain events which I am unsure how to trigger, illustrated in th ...