<div> stretches while wrapping becoming unnecessarily wide
Each row of the tree is nested inside a div with flex display. The whole tree is inside a fixed width (200px) div - the one with the gray background.
I want all the blue buttons to only take up as much width as needed to fit the text. When text wraps into multiple lines, the divs stretch to fill up the whole row. Can it be prevented without setting a constant width to the div?
https://jsfiddle.net/nLcgym5z/2/
<div class="filter-panel">
<div class="filter-tree">
<div class="filter-category">
<div class="filter-row-container">
<div class="filter-row">
<div class="tree-button-guide"></div>
<div class="tree-button">-</div>
<div class="filter-name selected">Karpaty</div>
</div>
</div>
<div class="filter-branch">
<div class="filter-category">
<div class="filter-row-container">
<div class="filter-row">
<div class="tree-button-guide"></div>
<div class="tree-button">-</div>
<div class="filter-name selected">Karpaty Zachodnie</div>
</div>
</div>
<div class="filter-branch">
<div class="filter-category">
<div class="filter-row-container">
<div class="filter-row">
<div class="tree-button-guide"></div>
<div class="tree-button">-</div>
<div class="filter-name">Zewnętrzne Karpaty Zachodnie</div>
</div>
</div>
<div class="filter-branch">
<div class="filter-category">
<div class="filter-row-container">
<div class="filter-row">
<div class="tree-button-guide"></div>
<div class="filter-name selected">Karpaty Austriacko-Morawskie</div>
</div>
</div>
<div class="applied-filters"></div>
</div>
<div class="filter-category">
<div class="filter-row-container">
<div class="filter-row">
<div class="tree-button-guide"></div>
<div class="filter-name selected">Karpaty Środkowomorawskie</div>
</div>
</div>
<div class="applied-filters"></div>
</div>
<div class="filter-category">
<div class="filter-row-container">
<div class="filter-row">
<div class="tree-button-guide"></div>
<div class="tree-button">+</div>
<div class="filter-name selected">Beskidy Zachodnie</div>
</div>
</div>
<div class="applied-filters"></div>
</div>
<div class="filter-category">
<div class="filter-row-container">
<div class="filter-row">
<div class="tree-button-guide"></div>
<div class="filter-name">Beskidy Środkowe</div>
</div>
</div>
<div class="applied-filters"></div>
</div>
</div>
</div>
</div>
</div>
<div class="filter-category">
<div class="filter-row-container">
<div class="filter-row">
<div class="tree-button-guide"></div>
<div class="filter-name">Karpaty Wschodnie</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.filter-name {
font-size: 0.85em;
line-height: 1;
padding: 3px;
margin: 1px;
cursor: pointer;
user-select: none;
align-self: flex-start;
width: auto;
}
.filter-name:hover {
color: royalblue;
}
/* selected filter names - collapsed or open view */
.filter-name.selected {
background: royalblue;
border-radius: 4px;
color: white;
}
.filter-name.selected:hover {
background: #5179f1;
}
/* blue selected filters buttons - collapsed branch view */
.applied-filters {
display: flex;
flex-wrap: wrap;
margin-left: 10px;
}
/* Displays filter name, plus/minus button and button horizontal tree branch centered in a row */
.filter-row {
display: flex;
align-items: center;
}
.filter-branch {
margin-left: 12px;
position: relative;
}
/*Tree vertical branches display */
.filter-row,
.filter-category {
position: relative;
}
.filter-category:not(:last-child)::before {
z-index: 1;
content: '';
position: absolute;
top: -15px;
left: 0px;
bottom: 10px;
border-left: 1px solid royalblue;
}
.filter-category:last-child .filter-row-container .filter-row::before {
z-index: 1;
content: '';
position: absolute;
top: -15px;
left: 0px;
bottom: 50%;
border-left: 1px solid royalblue;
}
/* Tree horizontal branches display */
.tree-button-guide {
line-height: 0.6;
height: 1px;
width: 5px;
margin-right: 2px;
border-top: 1px solid royalblue;
flex-shrink: 0;
}
/* Plus / minus tree buttons */
div.tree-button {
z-index: 3;
font-size: 0.8em;
text-align: center;
line-height: 10px;
width: 10px;
height: 10px;
padding: 2px;
margin: 2px;
margin-left: -3px;
background-color: royalblue;
border-radius: 2px;
color: white;
cursor: pointer;
flex-shrink: 0;
}
body {
font-family: sans-serif;
font-size: 90%;
background-image:url("../img/bg.jpg");
background-size: cover;
background-attachment: fixed;
}
.filter-panel {
width: 200px;
background: lightgray;
}
添加以下内容：
.filter-name.selected {
flex: 0;
}
You can add a flex-basis of 0% to the selected items:
.filter-name.selected {
flex-basis: 0%;
}
Unfortunately, this will force some items to line wrap before it is necessary.
The better answer might be to put the blue box inside the .filter-name element, as a new sub-element:
<div class="filter-name"><span class="selected-item">Beskidy Zachodnie</span></div>
Then apply the bg color, padding, and border radius to that element. You may also want to set it to display: inline-block .
上一篇: 我怎样才能在詹金斯设置发件人的地址？
下一篇: 当包装变得不必要地宽时，<div>延伸