I have the following code. How can I get the card div to only be as high as the text within it instead of taking up the entire height of the container div minus the margin I set for it?
<code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html, body{
margin: 0;
height: 100dvh;
background-color: darkkhaki;
}
.wrapper{
display: flex;
flex-direction: column;
margin: auto;
max-width: 1000px;
background-color: aqua;
height: 100dvh;
}
.header{
display:flex;
height: 100px;
background-color: purple;
}
.menu{
display:flex;
height: 30px;
background-color: blue;
}
.main{
display: flex;
flex-direction: row;
flex: 1 1 auto;
background-color: brown;
}
.card{
display: flex;
margin: 20px;
background-color: orange;
}
.footer{
display: flex;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class = "wrapper">
<div class = "header">
Header
</div>
<div class = "menu">
menu
</div>
<div class = "main">
main
<div class = "card">
my card
</div>
</div>
<div class = "footer">
footer
</div>
</div>
</body>
</html>
</code>
<code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html, body{
margin: 0;
height: 100dvh;
background-color: darkkhaki;
}
.wrapper{
display: flex;
flex-direction: column;
margin: auto;
max-width: 1000px;
background-color: aqua;
height: 100dvh;
}
.header{
display:flex;
height: 100px;
background-color: purple;
}
.menu{
display:flex;
height: 30px;
background-color: blue;
}
.main{
display: flex;
flex-direction: row;
flex: 1 1 auto;
background-color: brown;
}
.card{
display: flex;
margin: 20px;
background-color: orange;
}
.footer{
display: flex;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class = "wrapper">
<div class = "header">
Header
</div>
<div class = "menu">
menu
</div>
<div class = "main">
main
<div class = "card">
my card
</div>
</div>
<div class = "footer">
footer
</div>
</div>
</body>
</html>
</code>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html, body{
margin: 0;
height: 100dvh;
background-color: darkkhaki;
}
.wrapper{
display: flex;
flex-direction: column;
margin: auto;
max-width: 1000px;
background-color: aqua;
height: 100dvh;
}
.header{
display:flex;
height: 100px;
background-color: purple;
}
.menu{
display:flex;
height: 30px;
background-color: blue;
}
.main{
display: flex;
flex-direction: row;
flex: 1 1 auto;
background-color: brown;
}
.card{
display: flex;
margin: 20px;
background-color: orange;
}
.footer{
display: flex;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class = "wrapper">
<div class = "header">
Header
</div>
<div class = "menu">
menu
</div>
<div class = "main">
main
<div class = "card">
my card
</div>
</div>
<div class = "footer">
footer
</div>
</div>
</body>
</html>
I have tried everything I can think of the only thing that works is if I don’t make the containing div grow to take up all the vertical space. I want it do that but don’t want the card to take up all the vertical space. I only want it to be as big as it needs to be.