flex-shrink如何贏得填充？

Question

我有一個彈性箱標籤雲，從外部進行大小調整。如果需要，我希望它內部的標籤可以一直摺疊到零（邊緣情況）。現在，他們只能填充2倍。

基本上，我需要一種方法來使flex-shrink 「贏」 對padding。

如果可能，我希望在不使用overflow的情況下實現該功能：hidden，因爲這會干擾機箱內的其他內容。

可運行的代碼片段：

$('button').on('click', (e) => { 
 
    $('.tags').css({ 
 
    width: $(e.target).text() 
 
    }); 
 
});

.tags { 
 
    display: flex; 
 
    margin-bottom: 20px; 
 
    background: red; 
 
    overflow: visible; 
 
    padding: 20px 5px; 
 
} 
 
.tag { 
 
    position: relative; 
 
    padding: 5px 10px; 
 
    background: #ccc; 
 
    border: 1px solid #aaa; 
 
    border-radius: 20px; 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
    flex-shrink: 1; 
 
    overflow: hidden; 
 
} 
 
.tag + .tag { 
 
    margin-left: 3px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h3>Tags will not collapse beyond 2 x padding</h3> 
 
<div class="tags" style="width: 200px"> 
 
    <div class="tag">Tag 1</div> 
 
    <div class="tag">Tag 2</div> 
 
    <div class="tag">Tag 3</div> 
 
</div> 
 
<br /> 
 
<div> 
 
    <button>200px</button> 
 
    <button>100px</button> 
 
    <button>50px</button> 
 
    <button>10px</button> 
 
</div>

任何人有一個想法？

Answer 1

flex-shrink不能戰勝填充，也不能正常的塊元素：fiddle demo

的一種方法，使這項工作是在其上添加額外的包裝文本，並設置填充/邊框，而不是柔性的項目。

$('button').on('click', (e) => { 
 
    $('.tags').css({ 
 
    width: $(e.target).text() 
 
    }); 
 
});

.tags { 
 
    display: flex; 
 
    margin-bottom: 20px; 
 
    background: red; 
 
    overflow: visible; 
 
    padding: 20px 5px; 
 
} 
 
.tag { 
 
    flex-shrink: 1; 
 
    overflow: hidden; 
 
} 
 
.tag div { 
 
    padding: 5px 10px; 
 
    background: #ccc; 
 
    border: 1px solid #aaa; 
 
    border-radius: 20px; 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
} 
 
.tag + .tag { 
 
    margin-left: 3px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h3>Tags will not collapse beyond 2 x padding</h3> 
 
<div class="tags" style="width: 200px"> 
 
    <div class="tag"><div>Tag 1</div></div> 
 
    <div class="tag"><div>Tag 2</div></div> 
 
    <div class="tag"><div>Tag 3</div></div> 
 
</div> 
 
<br /> 
 
<div> 
 
    <button>200px</button> 
 
    <button>100px</button> 
 
    <button>50px</button> 
 
    <button>10px</button> 
 
</div>