如何使正确的元素溢出?

Question

我希望<div class="tags>元素的内容引起溢出，以便可以滚动其内容。现在，当我添加更多的标签/子元素时，元素只是在高度上扩展。我该如何预防呢?

我已经尝试了overflow-y: scroll和min-height: 0的许多组合，但我不认为我真的明白这里发生了什么。为什么它会有这样的行为?

.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

这就是你所说的吗?

我使用display: flex和flex:auto根据需要拉伸容器。

.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

我为它的父元素指定了一个特定的高度(100px)

然后为你的滚动元素添加90%的高度。

我使用90%的原因是滚动条的高度可能会与其他元素重叠。

这样，你的滚动元素的高度是相对于你的父元素。

.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>