Prevent vertical flex grow?
Hello, I made an example of my problem: https://svelte.dev/repl/410dd49777c94e6d872bfa23fffb3272?version=4.2.13
Here you can see that the image grows larger than the
.info element. I want to adjust the height of the image to the height of the .info element. Is this possible?Just a card • REPL • Svelte
Cybernetically enhanced web apps
5 Replies
I think I have an acceptable solution now by adding
flex: 1 0 180px to the picture, a max height and width to the img and space-between to .info Its not exactly what I wanted but I think I can live with it.You can try switch to using background-image instead of img tag
https://svelte.dev/repl/5aecd0a959b34be49370e8407366f1b1?version=4.2.13
Just a card • REPL • Svelte
Cybernetically enhanced web apps
you have your flex container to
align-items: start ... change to stretch if you want them to both be the same height
Yeah I forgot I also removed the align-items property completely along with the other changes
Thats inaccessible though
I actually want the image to shrink to the height of its sibling. Or, in other words: shrink everything to the smallest sibling. Flex cant do this though. It can only grow everything to the largest sibling