How can I make the contents of the <div class="tags> element cause overflow so that one can scroll its contents instead of the element simply extending in height?
I've experimented with different combinations of overflow-y: scroll and min-height: 0, but I'm struggling to understand why it behaves this way. Can someone help clarify it for me?
.card {
width: 300px;
height: 200px;
padding: 0.5rem;
margin: 1rem;
background: lightskyblue;
font-size: 0.9rem;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 4px 6px rgba(0, 0, 0, 0.23);
}
.header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.5rem;
}
.customerAvatar {
background: green;
width: 50px;
height: 50px;
}
.ownerAvatar {
background: red;
width: 50px;
height: 50px;
border-radius: 50%;
align-self: flex-start;
}
.details {
display: grid;
flex-grow: 1;
grid-gap: 5px;
grid-template: 4fr 1fr / 1fr 1fr;
min-height: 0;
min-width: 0;
}
.caseContainer {
display: inline-block;
min-height: 0;
min-width: 0;
}
.tags {
display: flex;
flex-wrap: wrap;
overflow-y: scroll;
}
.tag {
background: lightcoral;
box-sizing: border-box;
margin: 2px;
border-radius: 2rem;
padding: 0.25rem 0.75rem;
max-width: 100%;
word-wrap: break-word;
}
input,
textarea {
width: 100%;
box-sizing: border-box;
background: transparent;
border: none;
font: inherit;
transition: all 0.2s;
}
textarea {
resize: none;
}
textarea::-webkit-scrollbar {
width: 3px;
}
textarea::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
textarea::-webkit-scrollbar-thumb {
background-color: rgb(47, 147, 241);
border-radius: 3px;
}
input::placeholder,
textarea::placeholder {
color: rgba(0, 0, 0, 0.3);
}
input:focus,
textarea:focus {
outline: none;
box-shadow: -2px 0px 0px 0px rgba(47, 147, 241, 0.5);
}<div class="card">
<div class="header">
<div class="customerAvatar"></div>
<div class="ownerAvatar"></div>
</div>
<div class="details">
<div class="caseContainer">
<input name="case" id="case" placeholder="Case tags" />
<div class="tags">
<div class="tag">AAAAAAAAAAAAA</div>
<div class="tag">BBBBBb</div>
<div class="tag">CCC</div>
<div class="tag">D</div>
<div class="tag">FFFFFFFFFFFFFFFFF</div>
</div>
</div>
<textarea name="profilert" id="profilert" placeholder="Profilert"></textarea>
<input name="dato_frist" id="dato_frist" placeholder="Dato - Frist"></input>
<input name="kontakt" id="kontakt" placeholder="Kontakt"></input>
</div>
</div>