flex-shrinkがパディングに対してどのように勝つことができますか？

Question

私はフレックスボックスのタグクラウドを外部からサイジングしています。必要に応じて、内部のタグを折りたたみ可能にして、ゼロにしたい（エッジケース）。今のところ、彼らは2倍のパディングまでしか行かないでしょう。

基本的に、私はflex-shrinkがpaddingに対して "勝つ" にする方法が必要です。

可能であれば、このエンクロージャー内の他のものに干渉するオーバーフロー：隠しを使用せずに達成したいと思います。

Runnableを抜粋：

$('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>