All Questions
112
questions
-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 {...
- 1,954
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 ...
- 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 ...
- 1,204
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 ...
- 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 ...
- 42k
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 ...
- 687
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-...
- 2,470
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 ...
- 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 ...
- 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 ...
- 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 ...
- 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 ...
- 381
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="...
- 327
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 {
...
- 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).
...
- 527