I'm trying to define a two column layout using flexbox where the first column has an image and both columns have different background colors. I'd like both columns to stretch to the bottom of the window.
However, I get a white space at the bottom of the right column whenever I resize the browser window to a low enough height.
Here's an example of the behavior. In this case I'd like the red column to extend all the way down to bottom of the screen.
Any suggestions on how to fix this? I'd like to prevent stretching the image too much.
html,
body {
height: 100%;
}
body {
margin: 0;
}
.container {
display: flex;
height: 100%;
}
.left {
background: lightblue;
flex: 2;
}
.left img {
max-width: 650px;
width: 100%;
}
.right {
background: lightcoral;
flex: 1;
}
<div class="container">
<div class="left">
<img src="http://via.placeholder.com/400x400" />
</div>
<div class="right">
<p>Some content.</p>
<p>Some content.</p>
<p>Some content.</p>
<p>Some content.</p>
<p>Some content.</p>
<p>Some content.</p>
<p>Some content.</p>
</div>
</div>
Anthony C. :
Removing the set height for body/height takes care of it.\n\n\r\n\r\nbody {\r\n margin: 0;\r\n}\r\n\r\n.container {\r\n display: flex;\r\n height: 100%;\r\n}\r\n\r\n.left {\r\n background: lightblue;\r\n flex: 2;\r\n}\r\n\r\n.left img {\r\n max-width: 650px;\r\n width: 100%\r\n}\r\n\r\n.right {\r\n background: lightcoral;\r\n flex: 1;\r\n}\r\n<div class=\"container\">\r\n <div class=\"left\">\r\n <img src=\"http://via.placeholder.com/400x400\" />\r\n </div>\r\n <div class=\"right\">\r\n <p>Some content.</p>\r\n <p>Some content.</p>\r\n <p>Some content.</p>\r\n <p>Some content.</p>\r\n <p>Some content.</p>\r\n <p>Some content.</p>\r\n <p>Some content.</p>\r\n </div>\r\n</div>",
2018-07-03T20:08:52
More about “Image prevents flex item from stretching to bottom of screen” related questions