Skip to main content

All Questions

0 votes
1 answer
210 views

Flexbox on my home page not working properly on IE 11

My client reported an issue with me, which is flexbox not working on product card section on home page (WordPress site) https://hailinpower.com/ This is what it looks like on Chrome: screenshot: This ...
Brandon Zhang's user avatar
-1 votes
1 answer
1k views

Responsive two columns layout with Flexbox [duplicate]

I want to achieve this structure using flex: Which is responsive, on smaller screens it will look like this: Please notice that the first div on mobile is the second one. This is my code: .card {...
Renaud is Not Bill Gates's user avatar
0 votes
1 answer
153 views

IE11 flex wrapper with align-items disable scroll for flex column child

how can I enable scroll for flex column child, when flex column has max-height and contained in flex container ? I've got an example here https://codepen.io/ChatduChesire/pen/vYKVJoR When .modal-...
Max Ivanov's user avatar
3 votes
2 answers
101 views

IE 11 element after column flex overlap

I'm trying to understand where does this go wrong on IE 11. My footer overlaps with the main content of the page, where the main content does not have a fixed height, as the items filling it might ...
knee pain's user avatar
  • 610
0 votes
1 answer
67 views

Flex item shrinks too much in Internet Explorer 11

I use a flexbox that consists of a left and right part, both of equal width. The first displays an image and the right some text. The code wraps well in Google Chrome but for Internet Explorer 11, it ...
darkchampionz's user avatar
6 votes
2 answers
374 views

Flex-wrap does not wrap items in IE11

I use a flexbox container that includes two divs of equal width. The left displays an image and the right some text. The code wraps the items for Google Chrome but in Internet Explorer 11, it moves ...
darkchampionz's user avatar
0 votes
1 answer
226 views

IE11 - align items not working with popup

I have a popup that I'm trying to vertically align in the page, I use flex (align-items) to do this but it doesn't work for IE11. After some research I found there is a bug in IE11 where align-items ...
user9875's user avatar
  • 133
2 votes
0 answers
76 views

IE11 not restricting width with text-overflow: ellipsis [duplicate]

I have some HTML and CSS that shows a long string of text next to a button. The long string of text is vertically centered relative to the button, and the text shows an ellipsis ... so it all fits ...
Kevin Workman's user avatar
0 votes
1 answer
305 views

Display :before element on a flex container in ie11

I have a flex container with a couple of children that I need to have a before element on. The before element displays if the parent container is display: block but not if it's display: flex ! is ...
movac's user avatar
  • 1,883
0 votes
1 answer
130 views

IE11 Flex Container Overflows When Inside Table

Check out the below code sample in IE11 and Google Chrome. In Chrome, it displays as I expect it to, but in IE11 the table expands to be far wider than the containing block. This seems to be caused ...
Rob Gwynn-Jones's user avatar
0 votes
1 answer
518 views

Is there a polyfill for converting css flex shorthand to longhand in order to support IE11?

Is there a polyfill for converting Flexbox flex: shorthand property to their comparable longhand properties in order to support IE11? After doing some research I discovered a few flexbox polyfills ...
Crystal's user avatar
  • 1,455
0 votes
2 answers
684 views

Using d-flex and flex-wrap in Internet Explorer 11

I have seen that this question had been asked before and I tried the different answers provided, however, none seemed to work on my code. I am working on fixing a series of inputs that are displaying ...
cyber_angel's user avatar
0 votes
1 answer
215 views

CSS: Wrong element width and position IE11 (flexbox, position, transform)

I'm struggling since hours with a flyin in Internet Explorer 11. I have a header with two child elements. I display them with flexbox space-between. The second element (on the right side of the ...
webta.st.ic's user avatar
  • 5,061
0 votes
1 answer
113 views

Using flexbox elements within a table in IE11

I have a table with a row that needs to show data with nested rows. To make sure the data for "Attendee Name, Title" and "Attendee Company, Org., or other" are vertically spacing the content correctly ...
cfoster5's user avatar
  • 1,806
0 votes
2 answers
87 views

Flexbox's child is not getting the correct height in IE11 [duplicate]

Consider this snippet (which works in all major browsers): body { margin: 0; } #main { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; flex-...
Daniel's user avatar
  • 2,470
0 votes
1 answer
121 views

SCSS changes display: flex; to display: grid;

I am making an internal website for a company. We have to use Internet explorer. I am using SCSS to make this work. This works well in most cases except when I want to use flexbox SCSS changes ....
André Jarboe II's user avatar
1 vote
1 answer
1k views

max-width of image not working in flexbox for IE 11 but works on google chrome

I'm creating a 2 by 2 grid layout using flexbox where the first column items are merged together as shown below: This works in Google Chrome without a problem. The image can grow until the maximum ...
Xegara's user avatar
  • 103
0 votes
3 answers
297 views

How to make this simple landing page flex box work in all relevant browsers?

For hours I have been trying to make a simple landing box banner layout work in all relevant browsers using flexbox, but without luck. In the following there is a sketch of the layout I want to ...
Stooky's user avatar
  • 1
2 votes
1 answer
644 views

IE 11 Flexbox child is overflowing container [duplicate]

I have put together the following example. It works on all major browsers but it does not on IE11. The content div is overflowing the flex container (no scroll bar) and pushes the footer down. Any ...
Jose Ch.'s user avatar
  • 3,876
0 votes
1 answer
172 views

Flex-grow behaving differently on IE 11

I was experimenting with flexbox on IE and noticed that my navigation bar does not work the same on IE compared to all other browsers. The navigation bar should appear on two lines as soon as the ...
JasperTack's user avatar
  • 4,417
0 votes
1 answer
194 views

IE11 flex child doesn't shrink to give room to other child with non-wrapping content

IE11 doesn't shrink a flex child when another child is too small to fit it's (non wrapping) content. I have gone over the notorious IE flex bugs (https://github.com/philipwalton/flexbugs) and tried ...
Adriaan Meuris's user avatar
0 votes
1 answer
103 views

How to make this layout look the same in both Chrome and IE 11?

I made a small page and saw a bug in it. I show you the part of the code where the bug is visible. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="...
user153742's user avatar
1 vote
1 answer
622 views

How can I prevent flex items from shrinking in IE11 to be smaller than their content?

Assuming the following markup: (JSFiddle link) .parent { width: 200px; border: 1px solid #ccc; height: 300px; display: flex; flex-direction: column; } .space-avail-sets-height { ...
kthornbloom's user avatar
  • 3,690
2 votes
2 answers
515 views

Flex works in chrome but not in IE

the html structure of the code is as shown below. Now I have given background:red to timeline className ( to check if the child gets shrink or grow when minimizing and maximizing the window size). ...
hightides1973's user avatar
0 votes
2 answers
632 views

Overlapping flex item has different behavior in IE11 and Chrome

following this https://jsbin.com/limevid/1/edit?html,css,output , I notice that paragraph in IE starts from the top of the container instead in Chrome, paragraph overlap the container. p { ...
HouseFragance's user avatar
0 votes
3 answers
469 views

Why doesn't my flexbox hover effects work as expected in IE 11?

I have instituted a flex-grid in my code, however its not functioning as expected in ie11 (i unfortunately need to have it work there too)—Chrome and Firefox both work fine. What seems to ...
Alex DiCaprio's user avatar
0 votes
0 answers
122 views

html and css alignment between chrome and IE11

I am currenlty in a situation where I have this html <div class="grid-container"> <div class="item1">1</div> <div class="item2"> <div class="item3">3begin</...
I am not Fat's user avatar
2 votes
1 answer
1k views

List item alignment problem with flexbox in IE 11 and Edge

I've created an ordered list of questions, with the option to edit or delete each one. I'm using Bootstrap 4 and flexboxes to design my website. The list looks great on Firefox and Chrome, but when I ...
Alexander's user avatar
  • 4,109
0 votes
1 answer
130 views

IE element's height couldn't span its absolute-positioned flex container by min-height

I am making a simple page with a content-session that would span all the height of its container so that I can make a full-paged web. However, I need to make the content's container (div.inner) ...
mannok's user avatar
  • 1,811
0 votes
3 answers
1k views

CSS not applied when display flex is used in microsoft edge

I'm trying to apply border before and after the text. It works on all the browsers except for Microsoft edge and internet explorer. I'm using display: flex and please refer my code for details I have ...
Vinodh's user avatar
  • 57
2 votes
1 answer
460 views

<p> content is overflowing the div in ie11 [duplicate]

the descriptive sentence under each one of the project containers is over flowing the div container only in IE11 but in all other tested browsers (chrome, edge, and firefox) text wraps as expected. ...
Brandon.b's user avatar
  • 147
1 vote
2 answers
646 views

Flex item not centering in IE

I'm trying to position a small box in the center of the page on both axes. I got it working in Chrome, Firefox and Edge, but IE still misaligns. The box seems stuck in the bottom right corner of what ...
ttaaoossuuuu's user avatar
  • 7,834
0 votes
1 answer
105 views

How can i fix IE image and column flexbox bug?

I've made a resizable template using bootstrap4 css. In OK in all browsers except IE 11.0. To be sure .d-flex class doesn't works properly (I've used it to make all of my columns of the same height)....
Cove's user avatar
  • 669
0 votes
1 answer
504 views

Internet Explorer adds additional padding to flex box. How to fix?

I have three flex-box cards each identical with an img at the top followed by an info section split into two columns. It looks fine in all browsers, except Internet Explorer 9 and 11 (I haven't been ...
MikeP23's user avatar
  • 23
1 vote
0 answers
107 views

How can I create a flex row with gutters in IE?

I have a flexbox row with two columns. HTML is like this <div class="flex-row"> <div class="col col-38 grey"> <div class="text"> <h2>Headline </h2> <p>...
Sasa's user avatar
  • 11
2 votes
1 answer
132 views

Flexbox vertical content align with overflow in Internet Explorer

Edit: Everybody getting here trying to find a solution for IE's flexbox behavior with overflow have a look at this stackoverflow thread. Seems this is not going to be fixed. I was able to work around ...
user127091's user avatar
  • 2,451
0 votes
2 answers
560 views

align-content not working Internet Explorer 11

.row { background: green; color: white; margin-top: 20px; } .col2 { border: 3px solid black; display: flex; flex-direction: column; flex-wrap: wrap; align-content: flex-end;...
tom clarck's user avatar
0 votes
1 answer
50 views

4-column Flexbox-Layout works great on any browser, besides IE, where it shows only 3 columns in a row

I am coding a website (navigation isn´t responsive yet) and I´m using mainly Flexbox for columns and positioning. The website looks good in Firefox, Chrome and Edge, where it shows the desired 4-...
Marvin Klempert's user avatar
-1 votes
1 answer
195 views

IE11 Flexbox layout broken in scrolling container

I do have a flexbox-container which should contain two elements. Both of them can have dynamic content, which means the height cannot be specified. The container should have a maximum height of ...
Stefan's user avatar
  • 955
1 vote
1 answer
3k views

Difference between flex unset and flex none with IE 11

What is the difference between flex: unset and flex: none? I haven't been able to find any specific documentation that tells what flex: unset actually does. Also, flex: unset does not seem to work ...
tlm's user avatar
  • 1,022
0 votes
1 answer
641 views

Flexbox overlapping flex item in IE 11 [duplicate]

Screenprint The parent container has display: flex . Also the container has horizontal scroll enabled. Flex items have a specific width too. Its works perfectly on all other browsers Chrome/Firefox/...
RENJITH RV's user avatar
2 votes
2 answers
666 views

Flex item not taking height of image child in IE 11

I'm trying this: html,body{ background-color: black; margin: 0; padding: 0; } .wp { margin: 20px auto; width: 300px; } .a { display: -webkit-box; ...
andreihondrari's user avatar
1 vote
1 answer
82 views

display: flex won't render properly in IE11

I have this code: .fbox { display: flex; flex-direction: row; justify-content: center; } .box { width: 200px; height: 200px; margin: 15px; border: 1px solid black; ...
andreihondrari's user avatar
1 vote
5 answers
7k views

justify content flex-end not working for IE

Flex-end working for chrome and firefox, but not working for ie, go through following code .flex-container { display: flex; flex-wrap: nowrap; background-color: DodgerBlue; flex-...
Sarabjit Singh's user avatar
1 vote
0 answers
207 views

IE and Edge ignore absolute position of svg [duplicate]

After this question being marked as a duplicate of SVGs not scaling properly in IE - has extra space I think this is a separate issue, though part of the solution is similar. I did some more digging ...
WP Shala's user avatar
0 votes
2 answers
349 views

auto margin expansion not working inside flex box on IE11

I have an issue with margin: auto inside a flex box in IE11. Here is the organization I expect. The empty child have no content but the margin: auto should make it take the whole remaining space only ...
geauser's user avatar
  • 1,025
1 vote
3 answers
1k views

Flexbox row-reverse breaks align-items on IE 11

This pen behaves differently between IE11 and Chrome: https://codepen.io/excelkobayashi/pen/EMgaOE HTML: <div class="container"> <div class="left"></div> <div class="...
Excel Kobayashi's user avatar
0 votes
1 answer
234 views

IE11 - a "footer" at the bottom of the page that gets pushed down if height of content above is greater than height of window

I have implemented a "footer" that stays at the bottom of the page and gets pushed down if the height of the content above is greater than the height of the window. This works fine on Chrome, however ...
GeForce RTX 4090's user avatar
0 votes
2 answers
432 views

Flex item width can not work in IE11 when container have right scrollbar

Here is a example .FlexContainer { background: hsla(0,0%,0%,.1); display: flex; flex-direction: column; max-height: 220px; margin: 10px; padding: 20px; width: 300px; overflow-y: ...
samson's user avatar
  • 1
0 votes
1 answer
79 views

How can I modify problem for flex-flow on ie11?

I want to arrange the element li horizontally, and when the length is exceeded, the next element is placed on the top line. Parent Div-box have "position:fixed;" option. Chrome,Edge is Ok. But IE11 ...
GoodSea88's user avatar
  • 185

15 30 50 per page
1
2 3 4 5