Trying to make a very responsive webpage that features a #details section next to a #comments section. For different screen sizes, the #details section will grow or shrink automatically to best fit the .details. I would like the #comments section to match the height of the #details section. Inside my #comments section however, I would like a scroll-able #commentsWrapper that contains all the individual .comments. This is my desired result:
Despite all my efforts, I cannot get the #commentsWrapper to NOT increase the height of the #comments section like so:
*, ::before, ::after {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0;
}
body {
width: 100vw;
height: 100vh;
}
main {
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: 16px;
padding: 32px;
}
#details {
flex: 1 1 60%;
display: flex;
flex-wrap: wrap;
gap: 8px;
background-color: lightgrey;
}
.detail {
flex: 1 1 40%;
display: block;
height: 50px;
min-width: 360px;
background-color: orange;
}
#comments {
flex: 1 1 30%;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
background-color: lightcoral;
min-height: 480px;
padding: 8px;
}
#commentsWrapper {
width: 100%;
height: 100%;
max-height: 100%;
background-color: lightblue;
overflow-y: auto;
}
.comment {
display: block;
height: 200px;
width: 100%;
background-color: red;
margin: 8px 0;
}<body>
<main>
<div id="details">
<div class="detail">1</div>
<div class="detail">2</div>
<div class="detail">3</div>
<div class="detail">4</div>
<div class="detail">5</div>
<div class="detail">6</div>
<div class="detail">7</div>
<div class="detail">8</div>
<div class="detail">9</div>
<div class="detail">10</div>
<div class="detail">11</div>
<div class="detail">12</div>
<div class="detail">13</div>
</div>
<div id="comments">
<div id="commentsWrapper">
<div class="comment">A</div>
<div class="comment">B</div>
<div class="comment">C</div>
<div class="comment">D</div>
<div class="comment">E</div>
<div class="comment">F</div>
</div>
</div>
</main>
</body>
You need to sign in to view this answers
Leave feedback about this