I have an issue with displaying iframe with display: flex in Chrome and Opera, it works as intended in Firefox and IE11.
The issue is iframe inside div with display: flex is not taking all height in browsers like chrome and opera. However Firefox and IE11 display it correctly.
Could you help me fix it, such that it displays correctly also in Chrome and Opera.
Thanks.
This is the output in Firefox(correct output).
This is the output in Chrome and Opera.
html,
body {
width: 99%;
height: 98%;
}
.flex {
/* basic styling */
width: 100%;
height: 100%;
border: 1px solid #555;
font: 14px Arial;
overflow: auto;
/* flexbox setup */
display: -webkit-flex;
-webkit-flex-direction: column;
display: flex;
flex-direction: column;
}
.flex > div:nth-child(1) {
background: #009246;
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
}
.flex > div:nth-child(2) {
background: #CE2B37;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
min-height: 300px;
}
.flex > div:nth-child(2) iframe {
width: 99.5%;
height: 99%;
}
<body>
<div class="flex">
<div>test</div>
<div>
<iframe src="#"></iframe>
</div>
</div>
</body>
Related
i have a div with a fixed width and height. In the inside of this div
i have 6 more divs with content. I want them to scroll inside the main div vertical.
it works fine on Chrome and Firefox, but on Safari or chrome on iphone it looks
totally screwed up. Its the Section "Warum Obsthof Böhm?"
here is the link: Obsthof-Boehm
Code für Main Div:
#div_block-261-25 {
width: 40%;
display: flex;
margin-right: 80px;
height: 500px;
flex-direction: column;
text-align: left;
float: right;
height: 500px;
width: 40%;
padding: 10px;
}
Code für Content DIV
#div_block-618-25 {
flex-direction: column;
display: flex;
text-align: left;
align-items: flex-start;
height: 400px;
overflow: auto;
}
First of all, you have 2 times height: 500px; width: 40%; in #div_block-261-25.
Then just add flex to your div:
#div_block-618-25 > div{
flex: 0 0 auto;
}
It should fix your problem. (Worked on safari)
Context
I am still a beginner and creating a one-page dashboard for work. Unfortunately we are still forced to use IE11. Somewhere in my CSS there is something stopping a part of my website from centering in IE11 and instead it floats to the left slightly and I cannot figure out the solution
Research/Possible Solutions
I had found that setting the flex to something like this may help, but it did not work for me:
.example`
{
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
/* Center vertically */
align-items: center;
/*Center horizontaly */
justify-content: center;
/*Center horizontaly ie */
-ms-flex-pack: center;
min-height: 220px;
height:100px;`
}
I had also saw a similar solution to changing my CSS to this also, but I still could not get it working
.col-md-10 {
-webkit-box-flex: 0;
-ms-flex: 1 0 0%;
flex: 0 0 83.33333%;
max-width: 83.33333%; }
My CSS for items not centering
.col-md-10 {
-webkit-box-flex: 0;
-ms-flex: 1 0 0%;
flex: 0 0 83.33333%;
max-width: 83.33333%; }
.d-flex {
display: -webkit-box !important;
display: -ms-flexbox !important;
display: flex !important; }
.align-items-center {
-webkit-box-align: center !important;
-ms-flex-align: center !important;
align-items: center !important; }
HTML
<div class="container">
<div class="row d-md-flex no-gutters slider-text align-items-center justify-content-center">
<div class="col-md-10 d-flex align-items-center ftco-animate">
<div class="text text-center pt-5 mt-md-5">
**CONTENT**
Any and all help appreciated!
EDIT: MS Edge is also replicating the issue to a lesser extent - Screenshots of each browsers behaviour can be seen here - https://imgur.com/a/flsbt7a
One option is to use auto margins to achieve this.
.example {
//..vendors...
display: flex;
}
// center vertically
.align-items-center-v {
margin-top: auto;
margin-bottom: auto;
}
// center horizontally
.align-items-center-h {
margin-right: auto;
margin-left: auto;
}
// center both
.align-items-center {
margin-top: auto;
margin-bottom: auto;
margin-right: auto;
margin-left: auto;
}
Consider this:
<div class="parent">
<div class="child"></div>
</div>
.parent {
display: flex;
flex-direction: column;
background: teal;
width: 100%;
justify-content: center;
}
.child {
display: flex;
background: red;
width: 50%;
height: 20vh;
max-height: 20px;
}
Chrome (57), Firefox (52), IE (Edge) render is like so:
But Safari (Version 9 on a Mac with OS X) renders it like so:
I consider Safari's rendering wrong, tell me if you disagree.
If you remove either justify-content: center or max-height: 20px or change height: 20vh to height: 20px Safari renders like the other browsers (what I would consider correct).
Codepen: https://codepen.io/anon/pen/jmrOjq
Is this a known Safari bug? Am I miss using flex-box here?
I'm trying to get an image to fit inside a container while keeping it's size ratio. The image should take full height or width depending on orientation. My solution does work on all browsers I've tested but IE11(works in 10 and 9 surprisingly).
In IE 11 the image is cropped on the right. I'd like a pure css way if possible and I don't care about centering it.
Here is the JSFiddle : https://jsfiddle.net/wagad0u8/
<div class="owl-item" style="width: 465px;">
<a class="img-flux" href="page1.html">
<img alt="omg" src="http://placehold.it/1000x100">
</a>
</div>
<div class="owl-item" style="width: 465px;">
<a class="img-flux" href="page1.html">
<img alt="omg" src="http://placehold.it/400x780">
</a>
</div>
.img-flux img {
border: 0;
max-height: 100%;
max-width: 100%;
height: auto;
width: auto;
position: relative;
transition: all 0.3s;
margin: 0 auto;
float: none;
display: block;
vertical-align:middle;
}
#content-block *:last-child {
margin-bottom: 0px;
}
.owl-item, .owl-item .img-flux {
height: 100%;
}
.img-flux {
background-color: #ECECEC;
position: relative;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.owl-item{
float:left;
height:300px;
margin-bottom:50px;
}
This seems to be a bug in IE11: Bug Report. Adding flex: 1 (as in the report)
.img-flux img {
flex: 1;
max-width: 100%;
max-height: 100%;
}
works for me. Flexbox for the parent seems ok, so even centering is easy.
Another option is
flex: 0 0 auto; /* IE */
object-fit: scale-down; /* FF */
on the img, instead of flex: 1 , increasing compatibility with Firefox. See comments and bug report for more info.
.img-flux img {
border: 0;
max-height: 100%;
max-width: 100%;
height: auto;
width: 100%;
position: relative;
transition: all 0.3s;
margin: 0 auto;
float: none;
display: block;
vertical-align: middle;
}
Use
vw - for width instead of %
and
vh - for height instead of %
that is supported in older versions like IE11.
https://jsfiddle.net/wagad0u8/1/
To ONLY apply the changed code to IE10+ use:
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10+ */
.img-flux img {
max-width : 100vw;
max-height : 100vh;
}
I'd like scrolling content underneath a variable-height element. Is this a CSS blind spot or am I just not thinking of an obvious solution?
Codepen with my best effort so far, but it only works in Chrome and Firefox:
http://codepen.io/anon/pen/BKpxGP
HTML:
<div class="sidebar">
<header>
<h1>Header content that I would like to remain on the screen even when the main area is scrolled down.</h1>
<p>I want to avoid specifying a height or top padding/margin value, as the content may grow or shrink at times.</p>
<p>This code seems to work in Chrome and Firefox but not in Safari. I haven't tested IE yet.</p>
<p><strong>Challenge:</strong> Can we make it cross-browser?</p>
</header>
<main>
<ul>
<li>Elephant</li>
<li>Giraffe</li>
<li>Otter</li>
<li>Nine-banded armadillo</li>
<li>Cat</li>
</ul>
</main>
</div>
CSS:
.sidebar {
width: 400px;
height: 700px;
border: 10px solid #808080;
margin: auto;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.sidebar header {
background-color: #87ceeb;
border-bottom: 10px solid #00f;
padding: 0 1em;
}
.sidebar header h1 {
font-size: 1.2rem;
}
.sidebar main {
overflow-y: auto;
-webkit-flex-basis: auto;
-ms-flex-preferred-size: auto;
flex-basis: auto;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-webkit-flex-shrink: 1;
-ms-flex-negative: 1;
flex-shrink: 1;
}
.sidebar main li {
height: 400px;
border-right: 10px solid #ffc0cb;
margin: 10px;
padding: 10px;
}
it much more easy than you thought i think.
The css code that you are searching for is:
.example {
position: fixed;
}
On my website you see the same result in the header section. It stays on the top, even if you are scrolling down. :)
I think this is what you want http://codepen.io/dirtysmith/pen/jqyKBO
css
.sidebar header {
background-color: #87ceeb;
border-bottom: 10px solid #00f;
padding: 0 1em;
position: fixed;
width: 368px;
}
added a width to match the container, and position fixed.
I tried this today, and Safari works fine. I guess its Flex support was lagging but it's fixed now. Thank you for the suggestions everyone!