I have a block on my page where 2 images should stand next to each other. Depending on there width, they should scale accordantly.
Thank god we have Flexbox for that!
Now this demo works in Chrome, Safari, FF and IE Edge:
http://codepen.io/IbeVanmeenen/pen/PqgOJM
.el {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
margin: 4rem 0;
}
.el__wrp {
display: block;
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
justify-content: space-around;
min-width: 0px;
}
But the problem is that in IE11 and 10, the flex shrink seems to be ignored, resulting in the first image been shown full width and the second one disappearing...
Anyone have a clue how to fix this..?
Thanks in advance
Ok, fixed this!
I updated the pen.
I tested the original code, but replaced the images with text, and it worked! So the problem was the images.
Original code for the images was:
.el__wrp img {
display: block;
margin: 0;
max-width: 100%;
min-width: auto;
}
And I changed it to:
.el__wrp img {
display: block;
margin: 0;
width: 100%;
}
It all works now!
The IE 10 and 11 has bug when using min-height. It's known issues and you can find the issue for example here https://caniuse.com/#search=flex
Related
I've been trying to debug a CSS flex issue for a few hours. I need the three boxes in each row to have the same height. I've used flex quite a few times and think it might be an issue with floats but clearing them didn't seem to solve any obvious issues. It's likely that I'm overlooking something very simple.
Dev Page with Float Issues
.circle-box-table-container {
width: calc(100% + 42px);
margin: -10px;
overflow: hidden;
margin-bottom: 10px;
display: flex;
flex-direction: row;
}
.col-xs-12.col-sm-12.col-md-4.circle-box-alt-blue-border {
display: inline-flex;
flex-shrink: 0;
}
I see you used height 100% inside your box. you need to modify some css,
.circle-box-content-text{
height: auto;
}
.circle-box-content-heading{
height: auto;
}
.circle-box-content-containter{
height: 100%;
}
do this way, hope your height issue will fix.
I'm using chrome both on my laptop and on my iphone.
I created a simple example that demonstrates the problem: https://s3.us-east-2.amazonaws.com/asteroid-public/test/test.html
Try viewing that page on your desktop/laptop. The messages render correctly, not overlapping each other. Even when you use the DevTools to view the page as if you are viewing on a mobile device, it still works fine on the laptop. Now, try viewing it on your chrome app on your mobile phone. The messages all overlap each other and so it is hard to read.
Here are some screenshots showing the difference:
Why is this happening and how do I fix it on mobile?
It looks like your .chat .message css properties are causing this. I understand what you tried to do by doing this:
.chat .message {
margin: 4px 16px;
white-space: nowrap;
display: flex;
flex-direction: row;
align-items: center;
position: relative;
}
However what is causing your problem seems to be the display property. I hope that helps.
.chat .message {
margin: 4px 16px;
white-space: nowrap;
//display: flex;
//flex-direction: row;
align-items: center;
position: relative;
}
I suggest making all div class="message" include a div class="inner". In this way, you can have your div class="inner" at a width: 80%; and display: block;, and your messages have width: 100%; and height: auto;. You can set alignment rules on div class="message" by using .message[origin-me] and .message[origin-them] to set where the div class="inner" aligns. I hope this helps!
I'm building 100% height application sidebar that needs to scroll and keep a few links at the very bottom. My solution works perfectly in Chrome, but has an overlap issue in Safari.
The basic bit looks like this:
position: fixed;
left: 0;
min-height: 100vh;
height: 100vh;
display: flex;
flex-direction: column;
width: 180px;
justify-content: flex-start;
overflow-y: scroll
Check out the Codepen here:
http://codepen.io/jackmcdade/pen/PZveXo?editors=1100
Any help or insight appreciated! I fear it may be this Webkit Bug
Philip Walton's flexbox workaround #1 was the answer. Adding these to the child flex elements worked:
flex-shrink: 0;
flex-basis: auto;
https://github.com/philipwalton/flexbugs#1-minimum-content-sizing-of-flex-items-not-honored
I have this case:
http://codepen.io/anon/pen/radoPd?editors=110
This is the CSS Code:
.wrapper{
background-color: red;
min-height: 100vh;
display: flex;
}
.sidebar{
background: orange;
flex: 0 0 300px;
}
.main{
background-color: green;
overflow-y: scroll;
}
For some reason, on IE11, neither the .sidebar nor the .main area will fill the whole height of the wrapper.
This is inconsistency between browsers. Is this a bug? Am I missing something?
This a known IE bug that unfortunately has been closed as Won't Fix by IE Team and described as follows:
In all other browsers that support flexbox, a flex-direction:column based flex container will honor the containers min-height to calculate flex-grow lengths. In IE10 & 11-preview it only seems to work with an explicit height value.
AFAIK and despite this description, the bug also applies when flex-direction is row. As mentioned in the comments Philip Walton has proposed a solution here, which includes setting height to a fixed value, but this is not an option for OP.
As a workaround I propose to set a min-height: 100vh to the main element too:
.wrapper{
background-color: red;
min-height: 100vh;
display: flex;
}
.sidebar{
background: orange;
flex: 0 0 300px;
}
.main{
background-color: green;
min-height: 100vh;
}
Pen here.
I have a problem combining div boxes and the overflow: auto property for adding scrollbars if needed.
The problem is that I don't want the whole page to be scrollable, but just the content div, thus I added overflow: hidden to the body and overflow: auto to the content.
body
{
padding: 0;
margin: 0;
background-color: navy;
overflow: hidden; /** no scrollbar on whole page **/
height: 100%;
}
#content
{
background-color: green;
overflow: auto;
height: 100%;
}
Nevertheless, I'm not able to see the end of the page, as the div increases its size beyond the viewable part of the website.
Please suggest how to solve this problem and only keep the content div scrollable.
I uploaded an example of my problem here: jsfiddle.net/3n7ay/
I can only get this to work with a fixed header height, is there no solution for dynamic header size? It's hard for me to believe...
Thanks & Regards
I think you looking for overflow-y: scroll; instead?
See fiddle: http://jsfiddle.net/3n7ay/5/
If you set height: 100% to the content element and you have also an header in your viewport this will make the former not entirely visible inside the viewport itself.
So the height must be defined as 100% - <header height>, either via javascript (if you need to support older browser) or via CSS3 calc() function, e.g.
#content {
height: -webkit-calc(100% - <height of header>px);
height: -moz-calc(100% - <height of header>px);
height: calc(100% - <height of header>px);
}
Try flex box, if you don't concern about Ie8 and Ie9. You can see the compatibility situation in caniuse.com: flexbox
Make container a flex box:
#container {
background-color: yellow;
height: 100%;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
Flex the content:
#content {
background-color: green;
overflow: auto;
height: 100%;
-ms-flex: 1;
-webkit-flex: 1;
flex: 1;
}
See fiddle: http://jsfiddle.net/r4JUk/4/