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!
No description
8 Replies
Mannix
Mannix3mo ago
on the media query for infobox icon replace height: 100%; with align-self: stretch;
EmSixTeen
EmSixTeen3mo ago
Wahey, cheers buddy appreciate it
Mannix
Mannix3mo ago
:thumbup:
Tok124 (CSS Nerd)
all flex/grid items is set to stretch by default.
Mannix
Mannix3mo ago
that's true but you didn't go through op's codepen did you? He overwrite the default behavior 😉
Tok124 (CSS Nerd)
I did, and i noticed that 🙂 But then you could just remove the align-items:center; and it returns to the default behavior 🙂
Mannix
Mannix3mo ago
that's true but he may need it on mobile view 😉 there is always multiple ways of achieving things 🙂
Tok124 (CSS Nerd)
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 🙂