I have some cards in a container. The mark-up for the cards is convoluted due to reasons I won’t go into, so assume that the HTML can’t be changed. The text content in the cards may vary in length and my objective is to align the avatar image at the bottom of the cards so that the avatars always line-up regardless of the length of content in the cards. I’m trying to achieve this using a flex layout and setting margin-top: auto on the .card__avatar element. However, the issue is that because these cards contain various nested wrapper divs I’m struggling to get the contents to occupy the full vertical space of the card.

How do I code this in css/flexbox?
Looking how to format this.
I want this figma image to display like this.

FYI i am brand new to css. im currently working on a project thats basically a portfolio of different things. for some reason theres a section in my webpage that is not resizing correctly. i want the whole container to scale down proportionately. my other sections that are only image based work just as intended.

In this snippet, the inner-left element gets a new item added to it every time the Add Item button is clicked. It has a max-width of 50% of the parent width, however the flex items are being wrapped before that max width is reached.

I’m trying to replicate the same effect that you see on Trello in how a list is only as tall as needed, up to a limit determined by the list container.

I am trying to make a columns layout work using flexbox. I encountered a problem when I tried to make each column of text wrap on to the next line when it does not have any more space. My problem could be seen in the image below.

CSS Code I have a container with the following CSS:

I created a two-column layout (CodePen), where the left column stays fixed, while the right column scrolls. Additionally, these columns wrap into a single column when the browser width is small enough. My problem is once they wrap, the second column keeps its scroll behavior, and the container scrolls too (so I have a double scroll).

Is it possible to get the stretch behavior of display: flex when min-content would not fill the page, but still have good scrolling behavior if min-content is larger than the page size?

I’ve set up my DIVs in a layout I desire. The horizontal scroll works as expected (left part fixed, right part scrollable). The issue I noticed is that the vertical scroll only affects the latter.