Question

树的每一行都嵌套在带有flex显示的div中。整棵树在一个固定宽度（200px）div内 - 具有灰色背景的那个。

我希望所有蓝色按钮只占用适合文本所需的宽度。当文本包装成多行时，div会拉伸以填满整行。如果不为div设置恒定宽度，是否可以防止它？

<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;
}

Answer 1

添加以下内容：

.filter-name.selected {
flex: 0;
}

Answer 2

您可以为所选项目添加0％的弹性基础：

.filter-name.selected {
  flex-basis: 0%;
}

不幸的是，这会在必要之前强制某些项目换行。

更好的答案可能是将蓝色框放在.filter-name元素中，作为新的子元素：

<div class="filter-name"><span class="selected-item">Beskidy Zachodnie</span></div>

然后将bg颜色，填充和边框半径应用于该元素。您可能还想将其设置为display: inline-block。

<div>在包裹变得不必要的宽度时伸展

2 个答案: