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
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 working on this site:
http://miketest.best/
But for some reason, the finger scrolling up and down isn't working on phones. Tried overflow-y: scroll in the .slide-container > section but it isn't working. Desktop mousewheel and arrows works.
What can I be missing? I just want the contents in each section element to be able to scroll through on phones and computers. Preferably with the side scroller hidden.
.slide-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
overflow-x: hidden;
-ms-scroll-snap-type: x mandatory;
scroll-snap-type: x mandatory;
}
.slide-container > section {
height: 100vh;
width: 100%;
-ms-flex-negative: 0;
flex-shrink: 0;
position: relative;
scroll-snap-align: start;
overflow: scroll;
overscroll-behavior-y: contain;
padding: 100px 1em 1em;
}
If you are running WordPress, it is most likely a plugin that doesn't play nicely with the others or with your theme.
try switching your theme to one of the official Automattic themes like TwentyEighteen or others. See if that fixes the problem.
disable all plugins, then one by one, re-enable them, checking each time to see if the problem comes back.
If neither of those approaches work, you should ask in the official WP Support forums.
I am using Flexbox for a series of content blocks. The idea is to have blocks in a flex container whose height will be determined by the total of the flex items within it. This is working well on Chrome and Safari as it calculates the container height automatically and correctly, but the same does not happen on Firefox + IE. My CSS looks like this:
.container {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
.primary {
position: relative;
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 0;
padding-top: 56.25%;
margin-bottom: 10px;
-webkit-box-flex: 1;
-webkit-flex: 1 0 100%;
-ms-flex: 1 0 100%;
flex: 1 0 100%;
}
.secondary {
position: relative;
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 0;
padding-top: 28.10026385%;
flex: 2 1 40%;
margin-left: 10px;
}
}
Essentially, the padding-top: 28.1% decoration is for a background image set as an inline style. On chrome + safari, this calculates the height just fine. However, the container's height is not set up on IE + FF. I have tested all my browser prefixes and checked a lot of questions, but I'm a bit lost on why the height is calculated differently. If anyone has any suggestions that would be excellent. Setting a min-height on the blocks is not an option, as we will have varying sizes of blocks, so we don't want to constrain ourselves to a fixed or min height.
Short version: is there a difference in how Firefox + IE calculate height of flex containers and items? If so, what is the best way to get it to behave like Safari + chrome?
Here is a contrived example: http://codepen.io/anon/pen/NGjYGR
I'm noticing a few potential issues with the code you're referencing. Also, without full context of the referenced code—missing HTML—recommendations are based on the assumption that your HTML is structured in the following manner:
.container
.primary
.secondary
No height set on .container
If dimensions aren't set on this element how are the dimensions calculated for the children elements (i.e.: "28.1%" of ?) ?
There are many known issues with certain browser implementations of the flex specification
There are known issues with implementations flex-basis, and height calculations. Here is a comprehensive article on browser nuances on flex: here.
References:
Normalizing Cross-browser Flexbox Bugs:
http://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/
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
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/