I'm trying to get a simple flex layout to work the same in IE11 as it does in Chrome.
In Chrome it appears like this:
However in IE11 it appears like this:
Here is the code :
html,
body {
margin: 2px 0 0 0;
padding: 0;
}
.wrap {
display: flex;
min-height: calc( 100vh - 8px);
flex-direction: column;
max-width: 1200px;
margin: auto;
border: 1px solid #222222;
}
.main {
flex: 1 1 auto;
display: flex;
}
header {
background: green;
padding: 10px;
}
#footer {
background: green;
padding: 10px;
}
.sidebar {
background: blue;
flex: 0 0 135px;
padding: 10px;
}
.content {
background: yellow;
padding: 10px;
flex: 1 1 auto;
}
#media screen and (max-width:680px) {
.sidebar {
flex: 0;
order: 2
}
.main {
flex-direction: column;
}
}
<body translate="no">
<div class="wrap">
<header>
<div class="header-inner-left">
</div>
<div class="header-inner">
</div>
</header>
<main class="main">
<div class="sidebar">
</div>
<div class="content">
</div>
</main>
<div id="footer">
<div class='footerleft'>
</div>
<div class='footerright'>
</div>
<div style="clear: both;"></div>
</div>
</div>
</body>
That shows the HTML & CSS.
Is there anyway to make this look the same.
If I set .wrap so it uses:
height: calc( 100vh - 8px );
Then the loading page looks correct, but I need the ability for the content to grown beyond the .wrap correctly so set min-height: calc( 100vh - 8px );
Is there any way to do this ?
Thanks
Here's an idea that may work for you:
body {
display: flex;
}
.wrap {
min-height: 100vh;
flex-grow: 1;
display: flex;
flex-direction: column;
max-width: 1200px;
border: 1px solid #222222;
}
.main {
flex: 1 1 auto;
display: flex;
}
header {
background: green;
flex: 0 0 25px;
}
#footer {
background: green;
flex: 0 0 25px;
}
.sidebar {
background: blue;
flex: 0 0 135px;
padding: 10px;
}
.content {
background: yellow;
padding: 10px;
flex: 1 1 auto;
}
body {
margin: 0;
}
* {
box-sizing: border-box;
}
<div class="wrap">
<header>
<div class="header-inner-left"></div>
<div class="header-inner"></div>
</header>
<main class="main">
<div class="sidebar"></div>
<div class="content"></div>
</main>
<div id="footer">
<div class='footerleft'></div>
<div class='footerright'></div>
<div style="clear: both;"></div>
</div>
</div>
Do you really need display: flex on .wrap? because on https://caniuse.com/?search=calc you can find that "IE & Edge are reported to not support calc inside a 'flex'."
So if you use display: block instead, it might work on IE. In your CSS rule for .wrap I see that you have flex-direction: column;, but there are no other settings in that rule that would make a practical difference to using display: block.
Related
I have the following layout (see snippet below).
This is the expected behavior.
The problem is:
Once the extra-large-content is simulated (by removing the comment on the extra-large-content CSS rule), it breaks the layout.
I would like the extra-large-content to scroll horizontally while staying inside column-3.
Is this even possible?
(the code is also available here https://codepen.io/Ploddy/pen/NWXOgMG?editors=1100)
body {
height: 1920px;
margin: 0;
}
.container {
display: flex;
border: 1px solid #ccc;
margin: 1rem;
}
.container > * {
border: 1px solid #ccc;
position: sticky;
top: 0;
align-self: flex-start;
flex-grow: 1;
margin: 1rem;
}
#column-3 {
height: 300px;
}
#extra-large-content {
background-color: lightgreen;
/*width: 3000px;*/
}
<div class="container">
<div>
column-1
</div>
<div class="container">
<div>
column-2
</div>
<div id="column-3">
column-3
<div id="extra-large-content">
extra-large content
</div>
</div>
</div>
</div>
This should work nicely for you. Essentially, I just specified width's on the .container elements. In theory, you could put overflow-x: scroll; on the .container, however, this would break your sticky positioning.
Edit ~ OP wants the extra-large content to scroll horizontally, not the entire column-3.
Set overflow-x: scroll; on the new parent wrapper of the div that has the 3000px static width.
body {
height: 1920px;
margin: 0;
}
.container:first-child {
max-width: 100%;
}
.container:first-child > div:first-child {
width: 40%;
}
.container:nth-child(2) {
width: 60%;
}
.container:nth-child(2) > div:first-child {
margin: 1em 0em 1em 1em;
}
.container {
display: flex;
border: 1px solid #ccc;
margin: 1rem;
}
.container>* {
border: 1px solid #ccc;
position: sticky;
top: 0;
align-self: flex-start;
flex-grow: 1;
margin: 1rem;
}
.wrapper {
display: flex;
flex-direction: column;
width: 40%;
}
#column-3 {
background-color: salmon;
}
#extra-large-content {
height: 300px;
width: 3000px;
background-color: lightgreen;
}
.xl-content-wrapper {
overflow-x: scroll;
}
<div class="container">
<div>column-1</div>
<div class="container">
<div>column-2</div>
<div class="wrapper">
<div id="column-3">column-3</div>
<div class="xl-content-wrapper">
<div id="extra-large-content">extra-large content</div>
</div>
</div>
</div>
</div>
The issue comes from using flexbox.
Switching to grid fixes the problem.
body {
height: 1920px;
margin: 0;
}
#primary-container {
position: relative;
display: flex;
margin: 1rem;
}
#secondary-container {
position: relative;
display: grid;
grid-template-columns: max-content 1fr;
align-items: start;
}
#column-3 {
display: grid;
grid-auto-rows: min-content;
height: 200px;
}
#content-wrapper {
overflow: auto;
}
#extra-large-content {
width: 3000px;
background-color: lightgreen;
}
.sticky {
position: sticky;
top: 0;
align-self: flex-start;
}
.border {
border: 1px solid #ccc;
}
<div id="primary-container" class="border">
<div class="sticky">
column1
</div>
<div id="secondary-container" class="border">
<div class="sticky">
column2
</div>
<div id="column-3" class="sticky border">
column3
<div id="content-wrapper">
<div id="extra-large-content">
extra-large content
</div>
</div>
...
</div>
</div>
</div>
I have a layout that is mainly divided into 3 parts and the middle one should take a full height. And it does.
However, I need an additional div which will play a role of the backdrop and here the problem comes. The child doesn't want to take 100% height.
Here .body is a div that is being stretched when there is not enough content and .bg-gray is the one I want to take its parent full height.
Is there a way achieve this without using relative + absolute positioning?
Also, I'm looking for the answer to my question: why is this happening that way.
html, body {
padding: 0;
margin: 0;
}
.container {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: stretch;
}
.header {
height: 50px;
background-color: #e6e6e6;
}
.footer {
height: 50px;
background-color: #aaa444;
}
.body {
flex: 1;
}
.bg-gray {
background-color: #eee;
min-height: 100%;
flex: 1;
}
<div class="container">
<div class="header">
</div>
<div class="body">
<div class="bg-gray">
<div>
asdasd
</div>
</div>
</div>
<div class="footer">
</div>
</div>
Apply flexbox to the .body div.
.body {
flex: 1;
display: flex;
flex-direction: column;
}
html,
body {
padding: 0;
margin: 0;
}
.container {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: stretch;
}
.header {
height: 50px;
background-color: #e6e6e6;
}
.footer {
height: 50px;
background-color: #aaa444;
}
.body {
flex: 1;
display: flex;
flex-direction: column;
}
.bg-gray {
background-color: darkgrey;
min-height: 100%;
flex: 1;
}
.bg-gray div {
background: lightblue;
}
<div class="container">
<div class="header">
</div>
<div class="body">
<div class="bg-gray">
<div>
asdasd
</div>
</div>
</div>
<div class="footer">
</div>
</div>
So I have a flexbox but I'm having trouble understanding why the first child's padding gets ignored when the second child's content overflows.
here's an example when the second child's content aren't overflowing.
body {
padding: 0;
margin: 0;
}
.flex {
display: flex;
flex-direction: column;
width: 100vw;
height: 100vh;
}
.title {
background-color: green;
border-bottom: 10px solid black;
display: flex;
height: 50px;
padding-bottom: 40px;
}
.body {
background-color: blue;
flex: 1;
}
.content {
background-color: red;
height: 10vh;
}
<div class="flex">
<div class="title">
</div>
<div class="body">
<div class="content">
</div>
</div>
</div>
Here's an example when the child's content are overflowing
body {
padding: 0;
margin: 0;
}
.flex {
display: flex;
flex-direction: column;
width: 100vw;
height: 100vh;
}
.title {
background-color: green;
border-bottom: 10px solid black;
display: flex;
height: 50px;
padding-bottom: 40px;
}
.body {
background-color: blue;
flex: 1;
}
.content {
background-color: red;
height: 100vh;
}
<div class="flex">
<div class="title">
</div>
<div class="body">
<div class="content">
</div>
</div>
</div>
you can see in the second example that the title's height has greatly reduced.
It's because you're using flex css, which tries to accommodate all the children. If the title is supposed to not change in size no matter what, you need to set its flex-shrink to 0.
So try changing the css to:
.title {
background-color: green;
border-bottom: 10px solid black;
display: flex;
height: 50px;
padding-bottom: 40px;
flex-shrink: 0;
}
I have a small example of flex layout and I have some problem with Safari (Version 10.1.2 (12603.3.8))
So there is a content and inside of it there are four boxes, with the layout of 2x2. At the bottom there is a footer section.
I would like to place the boxes inside the content div to fill its height by 50% height and width. But in Safari it seems that it ignores the footer section and it places the boxes to align to the full page.
So here it what I want to achieve and it works in chrome:
And this is what it looks like in Safari:
I managed to try it in High Sierra where there is a newer Safari (Ver. 11) and it WORKS. So it must be a bug, but can we handle this in Safari 10? Thank you!
Here it is my code
HTML:
* {
box-sizing: border-box;
}
body, html {
width: 100%;
height: 100%;
margin: 0;
}
.wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
.content {
display: flex;
flex-wrap: wrap;
width: 100%;
height: 100%;
background: white;
border: 1px solid tomato;
}
.box {
width: 50%;
height: 50%;
background: skyblue;
border: 1px solid black;
}
.footer {
opacity: 0.7;
flex: 0 0 auto;
height: 100px;
background: plum;
}
<div class="wrapper">
<div class="content">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="footer"></div>
</div>
Since content is a flex column item you don't use height to make it fill its parent, you use flex-grow.
Remove the height on content and add flex-grow: 1
.content {
flex-grow: 1; /* added */
display: flex;
flex-wrap: wrap;
background: white;
border: 1px solid tomato;
}
Also no need for width: 100%, it does that by default
Stack snippet
* {
box-sizing: border-box;
}
body, html {
width: 100%;
height: 100%;
margin: 0;
}
.wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
.content {
flex-grow: 1;
display: flex;
flex-wrap: wrap;
background: white;
border: 1px solid tomato;
}
.box {
width: 50%;
background: skyblue;
border: 1px solid black;
}
.footer {
opacity: 0.7;
flex: 0 0 auto;
height: 100px;
background: plum;
}
<div class="wrapper">
<div class="content">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="footer"></div>
</div>
I am trying to make a one-pager site, which is working quite well. I have three sections that need to be fullscreen, that works. But when I resize the window to 500px width and make the height also shorter, the title from the second page comes up on the first page. Same thing happens with the title on the third page, this one displays on the second page.
Here is the codepen: http://codepen.io/anon/pen/jWaxMK
HTML:
<section>
<h2>Title 1</h2>
<div class="box">
</div>
<div class="box">
</div>
</section>
<section>
<h2 class="blue">Title 2</h2>
<div class="box circle"></div>
<div class="box circle"></div>
<div class="box circle"></div>
</section>
<section>
<h2 class="white">Title 3</h2>
</section>
CSS:
html,
body,main {
height: 100%;
margin: 0;
padding: 0;
}
section {
position: relative;
width: 100%;
height: 100%;
color: #ececec;
text-align: center;
display: flex; /* default: row nowrap */
flex-flow:row wrap;
justify-content: center;
align-items: center;
align-content: center;
}
section:nth-child(1) {
background: #06a2cb;
}
section:nth-child(2) {
background: #ececec;
}
section:nth-child(3) {
background: #F5E5D8;
}
h2{
margin-top:0;
font-family: 'Lobster';
margin: 1em;
flex: 0 0 100%;
color: black;
}
.box{
width: 250px;
height: 250px;
display: inline-block;
background-color: #ececec;
border-radius: 10px;
flex: 0 0 250px;
}
.circle{
border-radius: 50%;
background-color: white;
}
Any help is appreciated, thanks!
You can solve the problem by making all the section elements flex items, and giving them a minimum height.
Add this to your CSS:
body {
display: flex;
flex-direction: column;
}
section {
min-height: 100%; /* alternatively, try `min-height: 100vh` */
flex-shrink: 0;
}
Revised Codepen