How can I get the correct element to overflow? - html

Question

I want the <div class="tags> elements contents to cause overflow so that one can scroll its contents.
Right now the element simply extends in height when i add more tags/child elements. How can i prevent this?
I've tried many combinations of overflow-y: scroll and min-height: 0 but I don't think I really understand what is happening here. Why does it behave the way it does?
.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>

Answer 1

Is this what you mean by?
I used display: flex and flex:auto to stretch the container as needed.
.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);
display: flex;
flex-direction: column;
}
.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;
display: flex;
flex: auto;
flex-direction: column;
}
.tags {
display: flex;
flex-wrap: wrap;
flex: auto;
overflow: auto;
}
.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 {
min-width: 100%;
align-self: flex-start;
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>

Answer 2

I specified a specific height to its parent element (100px)
Then added height of 90% to your scrolling element.
Reason i used 90% is because the scrollbar's height might overlap the other elements.
this way , your scroll element's height is relative to your parent element.
.card {
width: 300px;
height: 200px;
padding: 0.5rem;
margin: 1rem;
font-size: 0.9rem;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 4px 6px rgba(0, 0, 0, 0.23);
border-radius:10px;
}
.header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.5rem;
}
.customerAvatar {
background: green;
width: 50px;
height: 50px;
}
.ownerAvatar {
background: #e52d27;
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;
}
.caseContainer {
display: inline-block;
min-height: 0;
min-width: 0;
height:100px;
}
.tags {
display: flex;
flex-wrap: wrap;
overflow-y: scroll;
max-height:90%;
}
.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>