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 */
}
Related
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?
https://jsfiddle.net/wqmm0kxb/5/
html:
<div class="full">
<header><h1>header stuff</h1></header>
<section>
<div>
{lots and lots of content}
</div>
<div>b</div>
<div>c</div>
</section>
</div>
css:
.full {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
header {
flex: 78px 0 0;
background: #ececec;
color: black;
padding-left: 33px;
}
section {
flex: auto 1 1;
display: flex;
align-items: stretch;
> div {
flex: auto 1 1;
overflow-y: auto;
}
}
}
My outer container, '.full', takes up the full width and height of the screen, and uses display:flex to make sure that the header + section children stretch to take up all the space beneath them.
Now, what I want is naturally for the header to take up 78px and the section to take up {full height - 78px} -- but without doing anything like calc preferrably. And I want to be able to scroll in the div children of section, without scrolling affecting the other divs or the page as a whole.
This works perfectly in Chrome, but open up my fiddle in firefox, edge, ie and it doesn't work as expected. Section gets the height of {lots and lots of content} rather than only taking the remaining space of '.full'
What should I do to achieve the Chrome-like layout that I'm expecting?
Apply the overflow-y:auto for your section also, that will fix the issue in IE and Firefox.
section {
flex: auto 1 1;
display: flex;
align-items: stretch;
overflow-y: auto;
> div {
flex: auto 1 1;
overflow-y: auto;
}
}
Fiddle DEMO
I have this huge image (I know, bad, will be replaced by some smaller ones for different viewport-sizes) that I want to display next to another div. Both elements are inside a flexbox, so flex-items.
See: https://jsfiddle.net/aedtyj9y/
My problem is that the image is way too big. What I would want is the image to take up all the space of #test which itself should only maximum take up 30% of the whole horizontal space, so having 70% of the main class='flex-container' for details and the rest for a an image that is contained in the 30% (preferably cropped instead of scaled)
Sounds easy, right? Just add max-width:30% to #test!
WRONG! https://jsfiddle.net/04wohehh/
Image is still too big.
So what, just add max-width:100%; max-height:100%; to the img itself, right?
Again, not working as intended:
https://jsfiddle.net/wqhtqq8d/
is this what you looking for?
set flex: 0 70% in .details
set flex: 0 30%; display: flex; align-items: center in #test
html,
body {
margin: 0;
padding: 0;
}
#info {
background-color: #2aabd2;
max-width: 100vw;
min-height: 100vh;
}
#info nav {
max-width: 5%;
}
.flex-container {
display: flex;
}
main {
background-color: red;
}
.details {
flex: 0 70%
}
#test {
flex: 0 30%;
background: blue;
display: flex;
align-items: center
}
.testimage {
display: block;
max-width: 100%;
background-color: blueviolet;
box-shadow: 0 0 10vh #111;
}
<section id="info" class="flex-container">
<nav id="node">
<ul>
<li>Home</li>
<li>Other</li>
</ul>
</nav>
<main class="flex-container">
<div class="details">
Blablablablabla
</div>
<div id="test">
<img class="testimage" src="http://placehold.it/2000x2000">
</div>
</main>
</section>
Here is my take: https://jsfiddle.net/hq2ppqr5/
What I did:
Added back in the max-width: 100% and min-width: 100% for
img, embed, object, video in order to ensure it the img does not
overflow/break out of it's "cage"
Removed margin-left: auto; from #info main as it is
unnecessary, flexbox should take care of that!
Added flex-grow:1; to #info main to let it fill up the
remaining (horizontal) space!
added flex-grow: 1 to the first child of the section
Added a background-color to the nav
Changed main to section (during fiddling around :))
One note though: it still looks different in firefox and chromium, but this seems to be an issue with padding.
Firefox evenly centers both flex-items, while chromium puts the image at the bottom. I am not sure what exactly is causing this.
This simple example is rendered differently in Chrome than in Firefox or Edge; in one case the main flex item shrinks to fit the flex container (set to viewport height), but in the other it doesn't. Is the rendering difference based on some bug, or is it something else?
html, body {
height: 100%;
margin: 0;
padding: 0;
}
body {
display: flex;
flex-direction: column;
}
main {
display: flex;
background: #f60;
}
<main>
<!-- any element longer than the viewport -->
<img src="https://i.redd.it/e7a2rxhf1yrx.jpg">
</main>
Edit: a more clear example.
It seems flexbox do not scale down replaced elements like images (that have an intrinsic aspect ratio) correctly in browsers at the moment, at least! And I believe this is what happens here.
(I read something similar here and met with an issue with image as a flex item here)
Solution:
One solution is using max-height: 100% on the flex item or even you can use flex-basis: 100% if it should always fill the parent height:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
body {
display: flex;
flex-direction: column;
}
main {
display: flex;
background: #f60;
max-height: 100%;
}
<main>
<!-- any element longer than the viewport -->
<img src="https://i.redd.it/e7a2rxhf1yrx.jpg">
</main>
Seems to be an inconsistency across browsers regarding how they may interpret attributes of flex boxes within flex boxes, but I managed to get it to work consistently across browsers by setting the height of the inner box to 0 and then setting the flex box to grow 100% (or 1) within the outer flex box. Here's an example using your code.
html, body {
height: 100%;
margin: 0;
padding: 0;
}
body {
display: flex;
flex-direction: column;
}
main {
display: flex;
background: #f60;
height: 0;
flex-grow: 1;
}
<main>
<!-- any element longer than the viewport -->
<img src="https://i.redd.it/e7a2rxhf1yrx.jpg">
</main>
I have an extremely simple flexbox based layout with a div and a footer. The footer has an input box in it. Whenever the keyboard comes up in mobile safari or chrome a small gap is shown betwixt the body and the keyboard. Does anyone know how to remove this horrible gap?
Please see the follow JS Bin on your device: http://jsbin.com/rujexadodu/edit?html,css,js,output
Full code
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=0"/>
<style type="text/css">
html {
margin: 0;
padding: 0;
}
body {
height: 100%;
margin: 0;
padding: 0;
border: 1px solid pink;
}
.container {
height: 100%;
display:flex;
flex-direction: column;
margin: 0;
padding: 0;
}
.footer {
height: 30px;
background-color: lightgray;
padding: 10px;
display: flex;
align-items: center;
}
.content {
flex: 1;
height: 100%;
width: 100%;
padding: 10px;
}
input {
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
This is the body content.
</div>
<div class="footer">
<input type="text" />
</div>
</div>
</body>
</html>
I'm not able to reproduce this on my iPad and nothing is jumping out as wrong in your code. So it might just be a bug in what ever version of Safari you have.
I wrote a library call iFrame-resizer that keeps an iFrame height matched to the content size and working out the content height in different browsers is so unreliable that I have to provide 10 different ways of working it out.
It's not a complete fix, however, setting the background color of the body and html elements to match the footer would make it much less noticeable.
I can't reproduce this so it must be a browser issue.
Here are a couple of things that may help:
Depending on your version of safari, you may need to prefix flexbox:
display: -webkit-box; /* Really old */
display: -moz-box; /* Firefox */
display: -ms-flexbox; /* IE */
display: -webkit-flex; /* Chrome & Safari */
display: flex;
and the flex value:
-webkit-box-flex: 1 0 auto;
-moz-box-flex: 1 0 auto;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
You need to give flex three values for it to work properly too, they are grow, shrink, and basis, in that order. The default is to allow grow, disallow shrink, and the size to start at 'auto' 1 0 auto.
I think flexbox still works if you don't put flex values on the children, but different browsers can have quirks... so I would make sure that the footer has
flex: 1 0 auto;
rather than
display: flex;
Some links that I find useful:
A complete guide to flexbox
A flexbox mixin for SASS