Growing div height based on text - html

Question

I am creating a card that will have an image, a title, and a button taking someone to the URL of the program. Since the title will be dynamically generated by the content, I will have no way of knowing how long the title will actually be. I want my card, specifically the card bottom, to grow to show all the text. What is the best way of achieving this??
.program{
height: 250px;
width: 200px;
background-color: red;
/* display: flex;
felx-direction: column; */
}
.program_top{
width: 100%;
height: 50%;
background-color: purple;
background-image: url('https://images.unsplash.com/photo-1581309638082-877cb8132535?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60');
background-repeat: no-repeat;
background-size: cover;
}
.program_bottom{
width: 100%;
height: 50%;
background-color: rgb(32, 32, 32);
display: flex;
flex-direction: column;
justify-content: space-around;
}
.program_title{
padding: 10px;
color: white;
}
.program_button{
text-align:center;
margin-bottom: 20px;
}
.program_button a {
color: orange;
text-decoration: none;
border: 2px solid orange;
padding: 0 30px;
border-radius: 15px
}
<div class="program">
<div class="program_top">
</div>
<div class="program_bottom">
<div class="program_title">
Security For Small Business asfdasdfasdfasdfasdfasdfasdfasdfsdfasdfasdfasdfasdfasdf
</div>
<div class="program_button">
View Program
</div>
</div>
</div>
Here is a codepen for it:
codepen

Answer 1

I changed your CSS to accomplish your needs. Please let me know if you need any additional help.
CSS
.program{
height: auto;
width: 200px;
background-color: red;
display: flex;
flex-direction: column;
}
.program_top{
width: 100%;
height: 125px;
background-color: purple;
background-image: url('https://images.unsplash.com/photo-1581309638082-877cb8132535?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60');
background-repeat: no-repeat;
background-size: cover;
}
.program_bottom{
width: 100%;
height: 50%;
background-color: rgb(32, 32, 32);
display: flex;
flex-direction: column;
justify-content: space-around;
}
.program_title{
padding: 10px;
color: white;
}
.program_button{
text-align: center;
margin-bottom: 20px;
}
.program_button a {
color: orange;
text-decoration: none;
border: 2px solid orange;
padding: 0 30px;
border-radius: 15px
}

Answer 2

On option is to fix the height and basically hide any extra content using
.program_title {
padding: 10px;
color: white;
overflow: hidden;
text-overflow: ellipsis;
}
This helps you to avoid any unexpected layout growth when the info on this container is too big.
The problem is when you need to show all this information, in this case you can provide another way to display the full text (a popup with details, mouseover hint)
.program{
height: 250px;
width: 200px;
background-color: red;
/* display: flex;
felx-direction: column; */
}
.program_top{
width: 100%;
height: 50%;
background-color: purple;
background-image: url('https://images.unsplash.com/photo-1581309638082-877cb8132535?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60');
background-repeat: no-repeat;
background-size: cover;
}
.program_bottom{
width: 100%;
height: 50%;
background-color: rgb(32, 32, 32);
display: flex;
flex-direction: column;
justify-content: space-around;
}
.program_title {
padding: 10px;
color: white;
overflow: hidden;
text-overflow: ellipsis;
}
.program_button{
text-align:center;
margin-bottom: 20px;
}
.program_button a {
color: orange;
text-decoration: none;
border: 2px solid orange;
padding: 0 30px;
border-radius: 15px
}
<div class="program">
<div class="program_top">
</div>
<div class="program_bottom">
<div class="program_title">
Security For Small Business asfdasdfasdfasdfasdfasdfasdfasdfsdfasdfasdfasdfasdfasdf
</div>
<div class="program_button">
View Program
</div>
</div>
</div>