I am trying to make a vertical flexbox layout with one image and a paragraph below. The image must take the most space possible while still keeping its aspect ratio. The paragraph must take the least height possible, have the same width as the image, and be at the bottom of the screen but always visible (no scrollbar).
Here's my code inside <body>:
<body>
<main>
<img src="sky.png">
<p>Some text here</p>
</main>
</body>
The CSS:
html {
font-size: 62.5%;
height: 100%;
overflow: hidden;
background: #000;
}
body {
height: 100%;
font-size: 1.6em;
margin: 0;
}
main {
display: flex;
flex-flow: column nowrap;
height: 100%;
}
main img {
flex: 2 1 auto;
object-fit: contain;
}
main p {
flex: 1 1 content;
background: darkblue;
color: white;
margin: 0;
}
The current result:
What I'm trying to get:
<image> takes all the screen space, which makes <main> do the same. I tried to use the align-items propriety on <main>, but it just keeps the image to its original size.
` might be anything
– sana Oct 28 '17 at 22:59