How can I make a flexbox div fill the height of its container in HTML and CSS?

Question

`hello, i am tryig to create a card using only css and html. the card is horizontal where there is an image on the left and a heading and a paragraph on the right and at the bottom right there is a link. My problem is that i can't make the link stay at the bottom right of the card and the heading and the paragraph start at the top right because they stai in the center.

I think the main problem is that the height of the div cast-card-info which is the container of the three elements doesn't fill the height of it's container. I tried with adding the flex basis to cast-card-info make it grow but it doesn't grow and fill the heigt because it only grow horizontally since the container cast-card is set to direction row. Setting a fixed height to the container cast-card would fix the problem but i don't want to set a fixed height so it is more responsive.

.cast-card{
    width: 600px;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
    background-color: var(--light);
    border: var(--border-size) solid var(--dark);
    border-radius: 6px;
    box-shadow: 4px 4px 0px var(--dark);
    padding: 8px;
    box-sizing: border-box;

}

.cast-card-info{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    padding: 16px 12px;
    flex: 1 1 auto;
}
.cast-card-text{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 12px;
    flex: 1 1 auto;
}

<div class="cast-card">
  <img class="cast-card-img" src="http://via.placeholder.com/148x243" alt="photo">
  <div class="cast-card-info">
    <div class="cast-card-text">
      <h3>heading</h3>
      <p>Morbi euismod nisl sit amet auctor fringilla. Suspendisse potenti. Nam auctor vel purus sed interdum. Donec pellentesque lacus tellus .</p>
    </div>
    <a class="link" href="">Read more</a>
  </div>
</div>

Answer 1

I think you might just be trying too hard. There are natural and default behaviors in CSS. Let those be the start and then modify them as needed. For example, you shouldn't have to set the width to 100% or use flex column in most cases because that's the natural width and flow of elements on a page.

Using flex with direction column on the cast-card-info div gives you the ability to use justify-content: space-between; to split the text and the link. Then you can give the link align-self: end to push it to the end of its container.

* {
  box-sizing: border-box;
}

.cast-card {
  --dark: black;
  --border-size: 2px;
  
  width: 600px;
  display: flex;
  background-color: var(--light);
  border: var(--border-size) solid var(--dark);
  border-radius: 6px;
  box-shadow: 4px 4px 0px var(--dark);
}

.cast-card-info{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px 12px;
}

.link {
  align-self: flex-end;
}

<div class="cast-card">
  <img class="cast-card-img" src="http://via.placeholder.com/148x243" alt="photo">
  <div class="cast-card-info">
    <div class="cast-card-text">
      <h3>heading</h3>
      <p>Morbi euismod nisl sit amet auctor fringilla. Suspendisse potenti. Nam auctor vel purus sed interdum. Donec pellentesque lacus tellus.</p>
    </div>
    <a class="link" href="">Read more</a>
  </div>
</div>