I've been working on a non-scrollable webapp for a while now and everything works fine on Chrome and Firefox. But unfortunately the app has to support ipad as well and I encountered a massive problem with flexboxes there.
.container {
display: flex;
flex-dircetion: column;
height: 100vh;
width: 100%;
background-color: #FF8;
}
.header {
height: 3rem;
width:100%;
background-color: #F88;
}
<div>
<div class="container">
<div class="header"/>
</div>
</div>
For some reason this is 100vh + 3rem high on the iPad and I don't have any idea why.
Does anyone know why it behaves this way?
And if so, is there a workaround?
Related
I’m looking to implement a full height (no-scroll) layout which contains a square image.
Depending on the available height of the container the image should scale accordingly in width.
So far I’ve attempted to implement the layout using both — floats and flexbox — but any solution (including anything responded to similar questions here) either leads to an overlap between image/container and the additional content to the right or doesn’t calculate 100% as intended (e.g. by including the height of the header).
My most recent attempt looks like this:
body,
html {
padding: 0;
margin: 0;
height: 100%;
}
.page {
height: 100%;
display: flex;
flex-direction: column;
align-items: stretch;
overflow: hidden;
background: #D8D8D8;
}
.header {
background: #FF9C9C;
padding: 5px;
}
.content {
display: flex;
height: 100%;
}
.image-container {
border: 1px solid #7100FF;
height: 100%;
}
img {
display: block;
height: 100%;
width: auto;
}
.aside {
background: #B6F0C7;
flex: 1 1 auto;
}
<div class="page">
<div class="header">
Header
</div>
<div class="content">
<div class="image-container">
<img src="http://placehold.it/100x100" alt="Card image">
</div>
<div class="aside">
<p>Other content</p>
</div>
</div>
</div>
https://jsfiddle.net/s0846ozy/
It’s been a few years since I have worked with CSS. Looking forward to having a rather obvious flaw in my approach pointed out. Thanks!
EDIT:
It seems this issue is browser-specific. I’m using the latest Firefox.
object-fit won't solve the issue as far as I can tell and is something I’ve already explored.
I’ve added a JSFiddle for easier experimentation.
Chrome (expected):
Firefox (actual):
use this:
img {
object-fit: cover;
}
for preserving the aspect-ratio!!
Here's a simple scroll snap demo:
.scroll {
border: 2px solid black;
width: 150px;
height: 150px;
overflow-x: scroll;
scroll-snap-type: x mandatory;
display: flex;
}
.item {
scroll-snap-align: start;
flex: 0 0 auto;
width: 150px;
height: 150px;
box-sizing: border-box;
border: 2px solid red;
font-size: 50px;
display: flex;
align-items: center;
justify-content: center;
}
<div class="scroll">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
</div>
What I expect to happen
Scrolling the scrollbar with the mouse in desktop Safari should snap to an item.
What happens
Scroll snap has no effect in Safari but works in Firefox and Chrome. But it does work in Safari if I scroll with the trackpad.
This seems like such a simple issue and I feel silly for resorting to asking such a trivial question on Stackoverflow, but I've been googling for the past 30 mins and I can't seem to find anyone else with the same issue or some documentation that explains this behavior. Even WebKit's scroll snap demo page does not indicate that it should only work on iOS or with the trackpad; why don't they mention this? Am I missing something?
This is an already fixed bug: https://bugs.webkit.org/show_bug.cgi?id=146696
Normally, setting overflow-x: hidden on the body should mean that the entire page never scrolls.
But in MacOS Safari, and iOS webkit (Safari, Chrome etc), if nested flexbox elements overflow the body, overflow-x: hidden is not respected.
Open the following in Chrome / Firefox and it works fine.
Open in Safari or iOS webkit, and it scrolls.
https://codepen.io/anon/pen/jdPbGN
body {
width: 100vw;
overflow-x: hidden;
margin: 0;
}
.flex {
display: flex;
}
.sidebar {
width: 100%;
height: 200px;
flex: 1 0 auto;
background-color: orange;
}
<body>
<main class="flex">
<aside class="sidebar">
</aside>
<section class="content">
<img src="https://via.placeholder.com/150" />
</section>
</main>
</body>
There is a simple fix, though not obvious if you assume overflow-x: hidden should always stop a parent scrolling when any of it's children / grandchildren overflow.
The fix is to put overflow-x: hidden on the same element as display: flex.
I feel this is a bug in Safari / iOS webkit. Curious if others agree.
I am working with flex items so I think it could be the problem of why my code is making a strange behaviour.
I have .flexContainer class that has a max-width property. After I resize the window, I want to change this max-width property to a higher value but if I set my media query as:
#media screen and (max-width: 850px){
.flexContainer{
max-width: 60%;
}
}
the max-width of the element is changing at 835px instead of 850px.
Here is my code:
HTML:
<div id="container">
<div id="left" class="block">Left</div>
<div id="center" class="block">
<div class="flexContainer">
<div class="flexDiv"></div>
</div>
<div class="flexContainer">
<div class="flexDiv"></div>
</div>
<div class="flexContainer">
<div class="flexDiv"></div>
</div>
</div>
<div id="right" class="block">Right</div>
</div>
CSS:
html, body{
width: 100%;
height: 100%;
}
#container{
display: flex;
height: 100%;
background-color: blue;
}
.block{
flex: 1;
}
#left{
background-color: green;
}
#center{
display: flex;
flex: 1;
flex-wrap: wrap;
align-content: flex-start;
}
#right{
background-color: orange;
}
.flexContainer{
flex: 1;
min-width: 100px;
max-width: 50%;
box-sizing: border-box;
height: 150px;
background-color: red;
padding: 10px;
}
.flexDiv{
width: 100%;
height: 100%;
background-color: yellow;
}
#media screen and (max-width: 850px){
.flexContainer{
max-width: 60%;
}
}
JSFiddle in which you can see that the max-width property changes at 835px instead of 850px.
EDIT: I add two screenshots so you can see it:
Why the media query is being executed after it should?
I found my problem here. Just I had to remove the margin of the body tag.
I will try to reproduce the effect that I am having on my real project (in which I have body tag fixed) and edit the question again.
EDIT: It seems that it was a bug or something similar of Google Chrome because I cannot reproduce the error anymore.
The error that I was getting is that when I looked at html tag on my Google Chrome inspector, it gave to me the wrong values for the webpage (around 30px less, and I do not have any padding/margin around it) so I thought that the media queries were being executed in the wrong width of the screen.
I know this is a "stupid" solution but it worked again when I closed and re-opened Google Chrome. Now it works like normal behaviour.
I've created a website with a flexbox-based structure. My goal was to have the entire viewable page filled by divs, but to avoid letting any divs push below the lower limit of the browser window. One of my divs should scroll when the text overflows, but in Firefox it instead affects the entire page.
Here is my HTML:
<div class="header_bar">header</div>
<div class="page_grid">
<div class="pg_nav">nav</div>
<div class="pg_main">This is the div that should scroll</div>
<div class="pg_sidebar pg_sidebar2">sidebar</div>
</div>
And here is my CSS:
html, body
{
padding: 0;
margin: 0;
height: 100%;
display: flex;
flex-direction: column;
}
.header_bar
{
flex: 0 0 auto;
}
.page_grid
{
flex: 1;
display: flex;
}
.pg_nav
{
width: 25%;
}
.pg_main
{
width: 50%;
overflow-y: auto;
}
.pg_sidebar
{
width: 25%;
}
Everything works completely fine in Chrome and Safari, but there are problems when I load the website in Firefox. I created a pen of the site here. Does anyone have any advice on how to make this show up the same across all three browsers?
Thanks so much!
As stated above by magenetwd, this is a known firefox bug, when I added min-width:0;min-height:0; to .page_grid, the problem solved.
.page_grid
{
flex: 1;
display: flex;
color: #FFFFFF;
/* Firefox bug fix styles */
min-width:0;
min-height:0;
/* End of Firefox bug fix styles */
}