The following is part of my small contribution to a post on auto height transitions:
html {
display: grid;
}
body {
display: flex;
flex-direction: column;
}
.content {
background: aqua;
flex-basis: 0;
overflow: hidden;
transition: all 1s ease;
}
span:hover + .content {
flex: 1;
}
<span>Hover over me!</span>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<p>Rest of the page content...</p>
It works in all major browsers except Safari. Any CSS tweak to run it smoothly in Safari as well?
In your code flex:1 expands to flex: 1 1 0%, thanks for the correction.Your the demo does animate flex-grow but it works because there is free space for the content to grow. Make the flexbox flex-flow: column and remove fixed height height: 200px;.
.flex-container {
width: 300px;
/* uncomment height to start animating*/
/*height: 200px;*/
font-size: 32px;
outline: 1px solid black;
display: flex;
flex-flow: column;
}
.flex-container div {
flex-grow: 0;
}
.item1 {
background: #e84d51;
}
.item2 {
background: #7ed636;
}
.item3 {
background: #2f97ff;
}
.animated {
animation: test 4s infinite;
}
#keyframes test {
0% {
flex-grow: 0;
}
100% {
flex-grow: 1;
}
}
<div class="flex-container">
<div class="item1">1</div>
<div class="item2 animated">2</div>
<div class="item3">3</div>
</div>
Now it doesn't animate because flex-grow is for distributing free space. If there is no free space, then changing flex-grow doesn't affect anything.
Your code sample in the opening post works because of the weird combination of display grid, percentage flex-basis and flex-grow values < 0:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#grd {
/* if you remove following line ,
then the .content won't clip due to overflow */
display: grid;
}
#flx {
display: flex;
flex-flow: column;
}
.content {
background: aqua;
flex-basis: 0%;
flex-grow: 0.25;
overflow: hidden;
}
</style>
</head>
<body>
<div id=grd>
<div id=flx>
<span>Top</span>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<p>Bottom</p>
</div>
</div>
</body>
</html>
Here flex-grow:0.25 shouldn't reduce the content size. ref. Somehow this happens on Chrome and not on Safari. If you remove display:grid, then overflow:hidden stops clipping the content. I don't think chrome is correct here cos flex-grow shouldn't reduce the .content size.
There is some difference I found how Chrome and safari switch attribute units while animating. Run following code on both chrome and safari:
<!DOCTYPE html>
<html lang="en">
<head>
<script>
window.setInterval(function () {
init();
}, 400);
function init() {
var content = document.querySelector('.content');
var stat = window.getComputedStyle(content).getPropertyValue('flex-basis');
var grow = window.getComputedStyle(content).getPropertyValue('flex-grow');
var height = window.getComputedStyle(content).getPropertyValue('height');
document.getElementById('stat').innerText = 'flex-basis:' + stat +
'\n' + 'flex-grow:' + grow + '\n' + 'height: ' + height;
}
</script>
<style>
#grd {
display: grid;
}
#flx {
display: flex;
flex-flow: column;
}
.content {
background: aqua;
flex-basis: 0;
overflow: hidden;
transition: all 6s ease;
}
span:hover+.content {
flex: 1;
}
p {
white-space: pre;
}
</style>
</head>
<body>
<div id=grd>
<div id=flx>
<span>Hover over me!</span>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex
ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.</div>
<p>Rest of the page content...</p>
<p id="stat">stat</p>
</div>
</div>
</body>
</html>
Observer flex-basis see how it switches from 0px to 0% instantly on chrome on animation start. But on Safari it switches at the end of animation. I don't know how it relates to the issue.
Solution: I still stick to animating flax-basis instead of flex-grow here. If fit-content is experimental and not desired then you can still use min-content and max-content. Unlike fit-content all browsers support them.
html {
display: grid;
}
body {
display: flex;
flex-direction: column;
}
.content {
background: aqua;
flex-basis: 0;
overflow: hidden;
transition: all 1s ease;
/* limit the height */
/* use either of these as per situation */
max-height: fit-content;
max-height: min-content;
max-height: max-content;
}
span:hover+.content {
flex: 1;
}
/* Safari 11+ */
#media not all and (min-resolution: 0.001dpcm) {
#supports (-webkit-appearance: none) and (stroke-color: transparent) {
span:hover + .content {
flex-basis:100vh;
}
}
}
/* Safari 10.1 */
#media not all and (min-resolution: 0.001dpcm) {
#supports (-webkit-appearance: none) and (not (stroke-color: transparent)) {
span:hover + .content {
flex-basis:100vh;
}
}
}
/* Safari 6.1-10.0 (but not 10.1) */
#media screen and (min-color-index: 0) and(-webkit-min-device-pixel-ratio:0) {
#media {
span:hover+.content {
flex-basis: 100vh;
}
}
}
<span>Hover over me!</span>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<p>Rest of the page content...</p>
We have to set max-height to intrinsic size to limit the height, otherwise it'll grow till end of the view port.
Note: I've tested the code on Safari 14.1 and Chrome 95 on iPadOS 15.1
To create Safari specific CSS I've referred https://www.browserstack.com/guide/create-browser-specific-css
As you know, flex transition doesn't work since Safari 13.1 (Mac). But if you use the below code maybe it works.
html {
display: grid;
}
body {
display: flex;
flex-direction: column;
}
.content {
background: aqua;
height: 0;
overflow: hidden;
transition: all 1000ms ease;
}
span:hover + .content {
height: 100%;
}
<span>Hover over me!</span>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<p>Rest of the page content...</p>
In the above snippet code, I change transition: all 1s easy; to transition: all 1000ms easy;.
I came to this conclusion based on This and this
Transition in safari has some problems that discussed here:
css transitions not working in safari
It can't work for auto values and all can't be use. also -webkit- at the start should use.
Here is my trick to solve this problem (Known problem: max-height is limited to 1000px):
.content {
background: aqua;
flex-basis: 0;
max-height: 0;
overflow: hidden;
transition: all 1s ease;
-webkit-transition: max-height 1s ease;
}
span:hover + .content {
flex: 1;
max-height: 1000px;
}
Related
Here is below a simplified version of what I have.
The goal is to fit the image into its parent. In other words, the image size must not exceed the parent size. max-width and max-height don't work because the parent (#media-insert) don't have a known size. What is currently happening, is that the parent increases its size to fit the image.
This is really easy solve by setting the image as the background of the parent instead of inserting it into the parent. However, I don't want to do that, because I want to be able to replace the image by a video.
Also, I don't want to modify the HTML. Keep in mind that this is a simplified version, in the real world there is more going on in the layout.
Thanks
* {
box-sizing: border-box;
}
main {
display: flex;
flex-direction: column;
justify-content: space-between;
}
#media-description {
/* the description must take the minimum possible space (flex-grow: 0) to fit everything (flex-shrink: 0) */
flex-shrink: 0;
flex-grow: 0;
}
#media-wrapper {
/* the wrapper should shrink/grow to fit the remaining space */
flex-shrink: 1;
flex-grow: 1;
}
#media-wrapper #media-insert {
width: 100%;
height: 100%;
/* center the image */
display: flex;
align-items: center;
justify-content: center;
}
#media-wrapper #media-insert img {
display: block;
/* image must fit inside the parent (doesn't work) */
max-width: 100%;
max-height: 100%;
}
/***** debug *****/
main {
border: 5px solid red;
/* simulate phone screen */
width: 350px;
height: 500px;
}
#media-wrapper {
border: 5px solid green;
}
#media-insert {
border: 5px solid lightgreen;
}
#media-description {
border: 5px solid blue;
}
<main>
<div id="media-wrapper">
<div id="media-insert">
<img src="https://picsum.photos/200/300" alt="lorem ipsum">
</div>
</div>
<div id="media-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</main>
Edit:
Here is how I want it to look like (but without setting the image as the background of the parent):
* {
box-sizing: border-box;
}
#examples {
display: flex;
}
#examples > div {
margin: 1em
}
main {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.media-description {
/* the description must take the minimum possible space (flex-grow: 0) to fit everything (flex-shrink: 0) */
flex-shrink: 0;
flex-grow: 0;
}
.media-wrapper {
/* the wrapper should shrink/grow to fit the remaining space */
flex-shrink: 1;
flex-grow: 1;
}
.media-wrapper .media-insert {
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center;
}
#img-example-1 {
background-image: url("https://picsum.photos/200/300");
}
#img-example-2 {
background-image: url("https://picsum.photos/100/100");
}
/***** debug *****/
main {
border: 5px solid red;
/* simulate phone screen */
width: 350px;
height: 500px;
}
.media-wrapper {
border: 5px solid green;
}
.media-insert {
border: 5px solid lightgreen;
}
.media-description {
border: 5px solid blue;
}
<div id="examples">
<div>
<p>
Image too big<br>
-> scale down
</p>
<main>
<div class="media-wrapper">
<div class="media-insert" id="img-example-1"></div>
</div>
<div class="media-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</main>
</div>
<div>
<p>
Image smaller than parent<br>
-> image keeps its size
</p>
<main>
<div class="media-wrapper">
<div class="media-insert" id="img-example-2"></div>
</div>
<div class="media-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</main>
</div>
</div>
You could position the image with absolute position, set it to 100% width and height and use the object-fit property to style it. It's like the background-size: cover:
* {
box-sizing: border-box;
}
main {
display: flex;
flex-direction: column;
justify-content: space-between;
}
#media-description {
/* the description must take the minimum possible space (flex-grow: 0) to fit everything (flex-shrink: 0) */
flex-shrink: 0;
flex-grow: 0;
}
#media-wrapper {
/* the wrapper should shrink/grow to fit the remaining space */
flex-shrink: 1;
flex-grow: 1;
}
#media-wrapper #media-insert {
width: 100%;
height: 100%;
/* center the image */
display: flex;
align-items: center;
justify-content: center;
background:red;
position:relative;
}
#media-wrapper #media-insert img {
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
object-fit:cover;
}
/***** debug *****/
main {
border: 5px solid red;
/* simulate phone screen */
width: 350px;
height: 500px;
}
#media-wrapper {
border: 5px solid green;
}
#media-insert {
border: 5px solid lightgreen;
}
#media-description {
border: 5px solid blue;
}
<main>
<div id="media-wrapper">
<div id="media-insert">
<img src="https://picsum.photos/200/300" alt="lorem ipsum">
</div>
</div>
<div id="media-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</main>
Got it! I modified passatgt's answer (thanks for showing me how object-fit works).
The modification I made:
All the image is visible: object-fit: contain instead of object-fit: cover
The image keeps its size if it already fits in the parent (max-width and max-height instead of width and height).
Added an example to show that it works with image bigger than parent and smaller than parent.
* {
box-sizing: border-box;
}
#examples {
display: flex;
}
#examples > div {
margin: 1em
}
main {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.media-description {
/* the description must take the minimum possible space (flex-grow: 0) to fit everything (flex-shrink: 0) */
flex-shrink: 0;
flex-grow: 0;
}
.media-wrapper {
/* the wrapper should shrink/grow to fit the remaining space */
flex-shrink: 1;
flex-grow: 1;
}
.media-wrapper .media-insert {
position: relative;
width: 100%;
height: 100%;
}
.media-wrapper .media-insert img {
position:absolute;
left: 50%;
top: 50%;
max-width: 100%;
max-height: 100%;
object-fit: contain;
transform: translate(-50%, -50%);
}
/***** debug *****/
main {
border: 5px solid red;
/* simulate phone screen */
width: 350px;
height: 500px;
}
.media-wrapper {
border: 5px solid green;
}
.media-insert {
border: 5px solid lightgreen;
}
.media-description {
border: 5px solid blue;
}
<div id="examples">
<div>
<p>
Image too big<br>
-> scale down
</p>
<main>
<div class="media-wrapper">
<div class="media-insert">
<img src="https://picsum.photos/200/300" alt="lorem ipsum">
</div>
</div>
<div class="media-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</main>
</div>
<div>
<p>
Image smaller than parent<br>
-> image keeps its size
</p>
<main>
<div class="media-wrapper">
<div class="media-insert">
<img src="https://picsum.photos/100/100" alt="lorem ipsum">
</div>
</div>
<div class="media-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</main>
</div>
</div>
change the max-width and max-height to min
#media-wrapper #media-insert img {
display: block;
min-width: 100%;
min-width: 100%;
}
Edit: or are you trying just to increase the width to fit the parent?
I have a similar problem as described here:
Center page vertically, make it scroll if bigger than screen
however I'm trying to find a pure CSS only solution, not involving JS.
I have a fixed containers defined like that:
.parent{
position: fixed;
z-index: 100;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
}
.child{
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(50%);
margin: 0 auto;
width: 600px;
}
It's well centered (as expected) when child is smaller than parent/viewport height. The problem is when child's height is greater then parent's height. Let's say parent has height 1000 px and child's height is 1600 px.
With above styles applied, I can scroll child (as expected) but not all the way to its top. The top of child is hidden and not possible to scroll to it.
What I want to achieve is to be able to scroll the child all the way to its top border.
The main question is if it's possible to achieve that with CSS only?
.parent {
display: flex; /* Use this proparty */
align-items: center; /* For Center align */
justify-content: center; /* For Center align */
overflow: auto; /* For auto scroll */
padding: 20px; /* This is only for spacing */
}
.child {
border: 1px solid red;
margin: 0 auto;
max-width: 560px; /* Use max-width instant of width in responsive it's help you for better view */
max-height: 100%; /* Use max-height instant of heiht in responsive it's tack auto height from text/content */
}
<!-- Parent Div start Here -->
<div class="parent">
<div class="child">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<!-- Parent Div ends Here -->
I want to create a fixed height card with a title, body, and footer. The title and footer can be one or more lines, and the body text should expand to fill the remaining space.
.card {
display: flex;
flex-direction: column;
height: 192px;
width: 300px;
border: 1px solid;
padding: 12px;
}
.title {
font-size: 18px;
font-weight: bold;
margin-bottom: 8px;
}
.body {
flex: 1 1 auto;
overflow: hidden;
overflow-wrap: break-word;
word-wrap: break-word;
margin-bottom: 8px;
}
<div class="card">
<div class="title">
This is a title
</div>
<div class="body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div>
footer text
</div>
</div>
How can I prevent the body text from being cut off? overflow-wrap/word-wrap seem to have no effect.
You have to make the height a mutliple of the height of one line. Here is an example using CSS grid.
Resize the main container to see the magic:
.card {
display: flex;
flex-direction: column;
height: 192px;
width: 300px;
border: 1px solid;
padding: 12px;
overflow: hidden;
resize: both;
}
.title {
font-size: 18px;
font-weight: bold;
margin-bottom: 8px;
}
.body {
flex: 1 1 auto;
margin-bottom: 8px;
line-height: 1.2em; /* height of one line */
display: grid;
grid-template-rows: repeat(auto-fit, 1.2em); /* same as line-height here */
grid-auto-rows: 0;
}
.body>div {
grid-row: 1/-1;
overflow: hidden;
}
<div class="card">
<div class="title">
This is a title
</div>
<div class="body">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div>
footer text
</div>
</div>
I use a flexbox container that includes two divs of equal width. The left displays an image and the right some text. The code wraps the items for Google Chrome but in Internet Explorer 11, it moves the right part on top of the left. How could I fix this? I tried to use flex: auto on both children, as well as flex-grow: 1, flex-shrink: 1 and flex-basis: 0 / flex-basis: auto. I also tried to add px or % to 0 but they all give the same results...
.d1 {
display: flex;
flex-wrap: wrap;
padding: 4%;
}
.image-container {
align-items: center;
display: flex;
flex: 1;
justify-content: center;
}
.d1 .text {
flex: 1;
padding: 2%;
}
<div class="d1">
<div class="image-container">
<img src="https://emilythompsonflowers.com/wp-content/uploads/2016/08/hippie-flower-300x300.jpg">
</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
You could refer to this code sample. The image is original size at first and the left and right parts are of the same width. It works well in IE 11 :
.d1 {
display: flex;
flex-wrap: wrap;
padding: 4%;
}
.image-container {
align-items: center;
display: flex;
flex: 1;
justify-content: center;
min-width: 200px;
}
.d1 .text {
flex: 1;
padding: 2%;
}
/* adjustment */
img {
width: 100%;
height: auto;
max-width: 300px;
}
<div class="d1">
<div class="image-container">
<img src="https://emilythompsonflowers.com/wp-content/uploads/2016/08/hippie-flower-300x300.jpg">
</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
Result in IE:
Add flex: auto to the first child.
For image scaling, add img { width: 100%; height: auto; }
.d1 {
display: flex;
flex-wrap: wrap;
padding: 4%;
}
.image-container {
align-items: center;
display: flex;
flex: auto; /* adjustment */
justify-content: center;
max-width: 250px; /* optional; limits image size */
}
/* image scaling */
img {
width: 100%;
height: auto;
}
.d1 .text {
flex: 1;
padding: 2%;
}
<div class="d1">
<div class="image-container">
<img src="https://emilythompsonflowers.com/wp-content/uploads/2016/08/hippie-flower-300x300.jpg">
</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
I've got a design I need to complete with 2 columns, the content inside the columns needs to line up with the container that's used across the site.
The issue I've got is on the design the second column has a background colour that stretches to the edge of the viewport.
If you look at the JSfiddle/code below I have a working solution if you uncomment the .col::after code at the bottom, however I was hoping there might be a cleaner more simple way of achieving this?
Cheers
https://jsfiddle.net/qksmpfrv/
html,
body {
padding: 0;
margin: 0;
}
* {
box-sizing: border-box;
}
.container {
max-width: 1400px;
margin: 0 auto;
padding: 0 80px;
}
.grid {
display: flex;
flex-wrap: wrap;
}
.col {
padding: 80px;
position: relative;
width: 50%;
}
.col:last-child {
background: grey;
}
/* .col:last-child::after {
background: grey;
content: '';
position: absolute;
height: 100%;
left: 100%;
top: 0;
width: 500px;
} */
<div class="container">
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="grid">
<div class="col">
1
</div>
<div class="col">
2
</div>
</div>
</div>
How about moving the grid outside the max-width container and then adding a max-width inside the columns:
Advantages of this approach over an after
will always be the width of the screen no matter how wide the monitor is - the after approach will only cover screens up to 2400px wide (I know not many screens are this big, but sometimes you might want to display your site at a marketing event and those screens may be)
you are not creating an extra 500px box off screen for smaller resolutions (so less rendering time for things like mobile and tablet)
You don't have to use a hack on every column you want to stretch to the edge
It's just nicer and easier to maintain
html,
body {
padding: 0;
margin: 0;
}
* {
box-sizing: border-box;
}
.container {
max-width: 1400px;
margin: 0 auto;
padding: 0 80px;
}
.grid {
display: flex;
flex-wrap: wrap;
}
.col {
position: relative;
width: 50%;
}
.inner {
max-width: 700px;
padding: 80px; /* move padding to inner */
}
.col:first-child .inner {
margin-left: auto; /* push this to the right if no wide enough to fill col */
}
.col:last-child {
background: grey;
}
<div class="container">
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<!-- move grid outside container -->
<div class="grid">
<div class="col">
<div class="inner">
<!-- add inner containers with max-width of 700px (half of your container) -->
1
</div>
</div>
<div class="col">
<div class="inner">
2
</div>
</div>
</div>