我希望 <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>
答案 0 :(得分: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>
答案 1 :(得分:0)
我为其父元素指定了一个特定的高度(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>