After experimenting with setting the height of the question div to auto, I found that it would stretch to fit its content. However, I am looking for a solution without overflow: auto or scroll. Is there a limit to how responsive it can be once a certain amount of content is added? When I add just one more sentence to the buttons, they expand by an additional line. Is this the maximum level of responsiveness achievable?
*{
margin: 0;
padding: 0;
}
body{
font-size: 1rem;
font-family: Arial, Helvetica, sans-serif;
}
.container{
height: 100vh;
display: flex;
justify-content: center;
text-align: center;
}
.card{
margin-top: 3rem;
height: 400px;
width: 300px;
border: 5px solid black;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.btn-grid{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 2rem;
width: 100%;
}
.button{
margin: 0.4rem;
padding: 0.6rem;
width: 60%;
border: 1px solid white;
border-radius: 12px;
height: auto;
}<div class= "container">
<div class = "card">
<div class = "question">
<div class = "q-content">
<h2>Who broke into Bryans house?</h2>
</div>
</div>
<div id= "answer-buttons" class= "btn-grid">
<button class= "button">xxxxxxxxxxxxx</button>
<button class= "button">A homeless khlhjhk</button>
<button class= "button">kkkkkkkkkkkkkkkkkkk</button>
<button class= "button">His ex-wife</button>
</div>
<div class = "from">
<div>From Episode 312</div>
</div>
</div>
</div>