Firstly, let me say that unfortunately I do have to support IE11 still and I don't believe this is a duplicate question, although I have found a few that were kinda similar.
I have a simple modal window which contains 3 flexible components in a column, header, footer and main.
The plan is that the outer box should grow as the content grows, until it is 80% of the height of the screen, at which point the middle section of the modal which is set to overflow-y:auto should get a scrollbar and the main modal will not get any taller.
Here is my markup
<div class="modal-wrapper">
<div class="modal">
<div class="modal-header">Header</div>
<div class="modal-main">
<div>Content goes here, could get very long</div>
</div>
<div class="modal-footer">Footer</div>
</div>
</div>
Fairly standard stuff. The modal is set to flex and the header and footer are fixed height. The middle section is set to grow and shrink as necessary. The main thing is that the .modal should never overflow the .modal-wrapper.
I have a jsfiddle set up and it's tested in Chrome, Firefox, Safari and iOS and it's working fine if you drag the bottom right box height up and down you'll see how it is supposed to behave. IE11 though is a mess.
https://jsfiddle.net/jonhobbs/sf6untnt/3/
Now, I have a feeling it may be related to the min-height bug here:
https://connect.microsoft.com/IE/feedback/details/802625/min-height-and-flexbox-flex-direction-column-dont-work-together-in-ie-10-11-preview
but I'm not convinced it's exactly that bug because none of the workarounds for that bug seem to work (e.g. using min-height:1px instead of 0, wrapping in another flexbox etc).
Hopefully somebody on SO can take a look at the jsfiddle and see an obvious problem
Maybe if you make it a flex child and use flex:0 1 80%; , it should fixe your trouble with IE :
example
html, body{
height: 100%;
display:flex;
flex-flow:column;
}
.modal-wrapper{
display: flex;
flex-direction: column;
width: 70%;
margin: 0 auto;
flex:0 1 80%;/* IE gets it , because the flow is column */
max-height:80%;/* others such as FF gets it */
background: white;
}
.modal{
display: flex;
flex-glow: 1;/* doesn't exist */
flex/*-shrink*/: 1; /* good enough */
flex-direction: column;
min-height: 1px;
}
.modal-main{
flex: 1;/* good enough */
min-height: 1px;
overflow-y: auto;
padding: 20px;
}
.modal-header, .modal-footer{
flex-grow: 0;
flex-shrink: 0;
height: 60px;
color: white;
line-height: 60px;
text-align: center;
background: dodgerblue;
}
<div class="modal-wrapper">
<div class="modal">
<div class="modal-header">Header</div>
<div class="modal-main">
<div>This content could get very long so I'm going to put a big long div in it</div>
<div style=" width:100px; height:1000px; background-color:red; opacity:0.1;"></div>
</div>
<div class="modal-footer">Footer</div>
</div>
</div>
https://jsfiddle.net/sf6untnt/7/
Related
this is my first post on stack overflow so I hope I'm doing it right, but I'm having this css problem on the home page of a website I'm creating where it has different sections and I want to make it so that the height of the sections are 80vh but will have a min-height of fit-content so that the content is never cut off if it exceeds 80vh height. However, it seems as if the min-height is not overriding the height and the section height is not big enough to fit the content.
here's the html and css for the section it is not working with:
<section class="home-section" id="home-shopcontact">
<div id="home-shopcontact-container">
<div id="home-shop" class="home-shopcontact-card">
<div class="home-shopcontact-card-content content-div">
<h1>See Something You Like?</h1>
<ul>
<li>Prints available for A5 to A1.</li>
<li>Optional bespoke framing.</li>
<li>Original handmade works.</li>
<li>Commissions.</li>
</ul>
<form action="shop.html">
<button class="pink-button">SHOP</button>
</form>
</div>
</div>
<div id="home-contact" class="home-shopcontact-card content-div">
<div class="home-shopcontact-card-content content-div">
<h1>Get in Touch.</h1>
<ul>
<li>Commission work.</li>
<li>General enquiries.</li>
<li>Any related questions.</li>
</ul>
<form action="contact.html">
<button class="pink-button">CONTACT ME</button>
</form>
</div>
</div>
</div>
</section>
here's the css:
.home-section {
border: 6px solid red;
min-height: fit-content;
height: 720px;
}
#home-shopcontact-container {
border: 6px solid blue;
display: flex;
gap: 3.125rem; /* 50px */
justify-content: center;
flex-wrap: wrap; /* when the cards are too big on the screen to both fit on the same line, move it underneath */
padding: 3rem; /* so it doesnt touch the edge of the screen so you can see the cards clearly */
}
.home-shopcontact-card {
position: relative; /* so I can position the link buttons relative to the card */
box-sizing: border-box; /* so the padding doesnt affect the size of the cards */
border: 1.5px solid var(--theme-grey);
min-width: fit-content; /* make sure that the cards have at least enough width to display the content */
min-height: fit-content;
width: 34.375rem; /* 550px */
height: 42.5rem; /* 680px */
border-radius: 50px;
padding: 2.8125rem 0 2.8125rem 0; /* 45px padding at the top and bottom of the card */
overflow: hidden; /* done this to make the transparent background not overflow with the rounded corners */
}
here's what it comes out looking like:
(hopefully you all can see that)
the red border shows the parenting section div and the blue border shows the content container div. My real question boils down to - why is the min-height not ensuring that the height of the red bordered section div is at least big enough to fit the content? You can see the blue bordered content div overflow underneath.
Any help would be greatly appreciated, sorry if I missed important details and if I have please let me know and i'll get it for you. Thanks! :D
If I`ve undestanded correctly, you want to create a section with height: 80vh, but if the content of the section is bigger than 80vh the section must to grow. Is this? If Yes, you must to do this in your section: height: fit-content; min-height: 80vh
I'm working for a client that had the super good idea to integrate a horizontal scroll effect into his one pager flow layout. That means that the user keeps scrolling down, but at some point the page starts moving from right to left instead of bottom to top. I implemented that via ScrollMagic.
So the problem starts when it gets responsive. When I start scrolling horizontally, the screen is now fixed to the device height and I need to extend my page content to the right when it flows out, instead of the normal "my content just flows out of the bottom, which I can follow by vertically scrolling".
My first idea was to kind of manually solve the problem when managing the content. I.E. giving different versions of content for mobile and desktop content. But it seems devices are just too different and I need a CSS solution.
My Question is: Do you have any idea of how to make content grow horizontally? Like height auto, but width "auto" (which doesn't work bc it's not the same)? Or like display: inline-block in the following example, but the outer wrapper (yellow border) wrapping all sub-boxes, not just the first column.
#wrapper {
display: inline-block;
border: 2px solid #ffff00;
}
#main {
width: 100%;
height: 200px;
border: 1px solid #0000ff;
display: flex;
flex-flow: column wrap;
}
#main div {
width: 100%;
height: 50px;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="wrapper">
<div id="main">
<div style="background-color:coral;">A</div>
<div style="background-color:lightblue;">B</div>
<div style="background-color:khaki;">C</div>
<div style="background-color:pink;">D</div>
<div style="background-color:lightgrey;">E</div>
<div style="background-color:lightgreen;">F</div>
</div>
</div>
</body>
</html>
EDIT:
After reading Temani Afifs Answer I found an additional specification of my problem: I need it to work with "column-width", so that I am able to write text which automatically expands to a second column when using up all vertical space. Pretty much just like here. The only reason the linked example is not perfect for me is that the wrapping container div does not expand and a scrollbar appears. I want to be able to add another .container-div to the right.
Maybe using CSS grid:
#wrapper {
display: inline-block;
background:yellow;
}
#main {
max-height: 100vh; /* don't take more than the screen height */
border: 1px solid #0000ff;
box-sizing:border-box;
display: grid;
grid-auto-flow: column; /* column flow */
/* fill all the column and wrap to the next one if no more space */
grid-template-rows: repeat(auto-fill, minmax(50px, 1fr));
}
#main div {
padding:20px;
}
body {
margin: 0;
}
<div id="wrapper">
<div id="main">
<div style="background-color:coral;">A</div>
<div style="background-color:lightblue;">B</div>
<div style="background-color:khaki;">C</div>
<div style="background-color:pink;">D</div>
<div style="background-color:lightgrey;">E</div>
<div style="background-color:lightgreen;">F</div>
</div>
</div>
I have simple structure of element container of dynamic height and fixed width (Markup below). On one hand the element's background should span the whole window width, on the other the children's size must be limited by the container (Desired layout below). The number of children and their sizes (which are equal on the image only for simplicity) are dynamic.
Is that possible without adding extra container? I want to avoid achieving the desired element content width by setting width on the children, because their number is dynamic and the size relationships become complicated to write unless their total width is already limited by container's width.
Here's a pen to experiment;
Markup
<div class="container">
<div class="child">
<div class="child">
...
</div>
.container {
width: <fixed-width>px;
}
Desired layout (the whitespace between children and container is irrelevant)
One route we can take to solve this is by using viewport width on the parent container padding, to force the children into a box that is only 500px wide (as per your codepen).
The important thing to remember when doing this is that box-sizing:border-box; will need to be set on the container, otherwise the padding goes ballistic.
We do this by using calc, vw and padding.
padding: 20px calc(50vw - /*half of container width*/);
Here's the full expanded code of your container on the linked codepen:
.container {
display: flex;
flex-flow: row nowrap;
justify-content: center;
margin-left: auto;
margin-right: auto;
height: 300px;
width: 100%;
padding: 20px calc(50vw - 250px);
background-color: #acffac;
background-size: 100vw auto;
background-position: center top;
box-sizing: border-box;
}
html {
overflow-y:scroll; /* fixes potential calculation errors caused by scroll bar - thanks to Roberts comment */
}
Here's a working version of the codepen, and for the sake of keeping all my eggs in one basket, here's an expandable code snippet:
.container {
display: flex;
flex-flow: row nowrap;
justify-content: center;
margin-left: auto;
margin-right: auto;
height: 300px;
width: 100%;
padding: 20px calc(50vw - 250px);
background-color: #acffac;
background-size: 100vw auto;
background-position: center top;
box-sizing: border-box;
}
.child {
flex: 1 0 auto;
width: 100px;
height: 100%;
background-color: #ff4444;
}
.child+.child {
margin-left: 20px;
}
<div class="container">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
I will finish off by pointing out that if someone else has a better solution, you may want to look at that for time being instead as there is some issues with using vw inside calc on older versions of Chrome and Safari.
EDIT:
As noted in the comments by Vadim and Robert there are a few things that can cause some snags.
Firstly, assuming you are working with a bare minimum template (i.e. no normalize/reset.css), your body will most probably still have the inherent margins that would mess with this kind of layout. You can fix this with:
body {
margin:0;
}
Secondly, depending on your OS (Yes I'm looking at you Microsoft!) your scrollbars can push your content to the side whilst simultaneously still being included in the calculation for vw.
We can fix this one of two way. The first being an adjustment on the padding calculation to include the scrollbar side, but you would have to write a script to ensure that scrollbar is actually present, and scrollbars differ in sizes (I.E -> 17px, Edge -> 12px).
The other alternative would be to use a custom content scroller, which would do a full overflow:hidden; over the content, thereby removing the scroll bar, before implementing it's own version of a scrollbar (which generally lies on top of the content with a position:fixed;) it.
Using vw and flex we can center the child elements and achieve exactly what you require. I have written a JSfiddle where you can check it out.
Basically what I have done is created a container with display set to flex. Using margin property of the first child element, I have centered all of the other child divs and then the regular properties were added to other divs.
Here's the code
body{
margin: 0;
padding: 0;
}
#container{
display: flex;
width: 100vw;
height: 40vw;
background-color: #333333;
align-items: center;
}
.child{
width: 4vw;
height: 80%;
background-color: red;
margin-right: 10vw;
}
.child:first-child{
margin-left: 28vw;
}
<div id="container">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
Here's a CSS puzzle for you all.
I'm using flexbox in my layout. I have a header with a few buttons on the left side, some text in the center, and another button on the right. Here's an ascii drawing:
[btn][btn2][btn3][ text ][btn4]
Unfortunately, this looks weird because the text isn't centered in the header. What I really want is this:
[btn][btn2][btn3][ text ][btn4]
Ideally, I'd like to continue using flexbox to achieve this because it makes most of the horizontal layout really easy, but I'm willing to fall back to floats and/or positioning if need be.
One problem with positioning the text element absolutely is that long text will under/overlap the buttons on the side. I currently use text-overflow: ellipsis and as a bonus, I would love to continue to if possible:
[btn][btn2][btn3][ long text causes elli... ][btn4]
I'm also okay with adding extra container elements if that helps. Perhaps there's a way to solve this by adding left buttons and right buttons in containers and then ensuring those containers are always the same width?
Edit: I think I took a step in the right direction with this CodePen. It properly centers the text. The only downside is that the h1 needs a fixed or percentage width, and if that width is wider than the space available, it seems to just overlap the neighboring elements.
You came very close to a working sample. I forked your CodePen with a solution that don't require widths of any kind. It's using the power of flex to position elements.
The H1 will always be in the middle, with a width of the same size as the surrounding left-btnsand right-btns, using flex: 1;
You can, of course, specify your H1 to a fixed width as you did, or make it for example flex: 2; to have it take up 50% space instead of 33%.
Here's the fork on CodePen. I've removed unnecessary code.
And the code:
HTML
<div class="wrapper">
<div class="left-btns">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<h1>center me! center me! center me! test woah asdf veasdf veasdf veasdf veasdf ve</h1>
<div class="right-btns">
<div class="box"></div>
</div>
</div>
<h1>center me!</h1>
CSS
.wrapper {
background: green;
display: flex;
margin: 5px;
}
h1 {
flex: 1;
text-align: center;
margin: 5px;
background: yellow;
overflow: hidden;
text-overflow: ellipsis;
white-space: noWrap;
}
.box {
width: 50px;
height: 50px;
margin: 1px;
background: red;
}
.left-btns,
.right-btns {
margin: 5px;
display: flex;
flex: 1;
background: blue;
}
.right-btns {
justify-content: flex-end;
}
I'm working on a two column layout. Both columns will display an iframe, the width of both will be defined as inline-style / be set in the CMS. If the iframe is smaller than the column, it should center vertically. If its bigger than the column, it should shrink to the max width of the column, which is nearly 50% wide.
(Yes, this could probably be done without using flexbox twice. But I'm not interested in such answers, because I simplified the example and the use case.)
Example:
http://jsbin.com/logifu/2/
HTML:
<div class="content">
<div class="col">
<div class="media-wrapper">
<iframe src="http://www.jsbin.com/blog" frameborder="0" scrolling="no" style="width: 2000px; height: 2000px"></iframe>
</div>
</div>
<div class="col">
<div class="media-wrapper">
<iframe src="http://www.jsbin.com/blog" frameborder="0" scrolling="no" style="width:200px"></iframe>
</div>
</div>
</div>
SCSS:
.content {
display: flex;
justify-content: center;
flex-flow: row wrap;
}
.col {
display: flex;
justify-content: center;
align-items: flex-start;
flex: 1;
height: 100%;
min-width: 0; // this fixes the issue in FF 34
+ .col {
margin-left: 40px;
}
}
.media-wrapper {
box-sizing: border-box;
max-width: 100%;
padding: 15px;
background: lightblue;
}
iframe {
display: block;
margin: 0 auto;
max-width: 100%;
overflow: hidden;
}
This works as expected in Chrome 39. In Firefox 33 and in IE 10 this works, too. (I'm lazy, so I didn't add the IE10-flexbox syntax in the fiddle.)
In the new FF34 it behaved the same as in IE11, but this could be fixed with max-width: 100%. See How can I get FF 33.x Flexbox behavior in FF 34.x? for further explanation.
Unfortunately, this fix does not affect IE11. So how do I prevent IE11 displaying the iframe larger than the column? And why is this happening; is this a bug or is this another flexbox-feature that was reintroduced as mentioned in the linked question?
Ok, I found a way to prevent this in IE11: max-width: calc( 100% - 0.1px );. Therefore the max-width gets calculated and interpreted in pixel and not in percent, but is nearly 100%. So visually everything looks as expected.
Does anyone know a better solution or an explanation for this problem?