Need my column to take up the full height of the available space on desktop - probably simple!
Hey there.
Probably missing something silly here, but my head is jelly for the time being.
- I have this component (
.infobox) with two direct children (.infobox__icon and .infobox__inner).
- On mobile the .infobox__icon and the .infobox__inner are stacked as a vertical column, and on desktop they're a horizontal row.
- .infobox__icon has a background colour. On mobile that should stretch the full available width, and on desktop it should stretch the full available height. The latter is the issue! It's not stretching to fill the available space, as can be seen in the screenshot. I can't figure out this simple thing right now, and it's getting to me 🥲
Here's the pen: https://codepen.io/emsixteen/pen/poBjGwW
Appreciate the help in advance!
8 Replies
on the media query for infobox icon replace
height: 100%; with align-self: stretch;Wahey, cheers buddy
appreciate it
:thumbup:
all flex/grid items is set to stretch by default.
that's true but you didn't go through op's codepen did you? He overwrite the default behavior 😉
I did, and i noticed that 🙂 But then you could just remove the align-items:center; and it returns to the default behavior 🙂
that's true but he may need it on mobile view 😉 there is always multiple ways of achieving things 🙂
yupp, and many ways to revert the value back to the default value. i mean you could do
align-items:stretch; or align-items:initial; or align-items:revert; or just remove align-items property completly, so yeah, there are many ways 🙂