怎样才能战胜软垫？

Question

我有一个弯曲盒标签云，正在大小从外面。如果需要的话，我希望它里面的标签是可折叠的，一直到零(一个边缘的情况)。现在，他们只会走2倍他们的垫子。

​

​

基本上，我需要一个让flex-shrink“赢”padding的方法。

如果可能的话，我想要做到这一点，而不使用溢出:隐藏，因为这将干扰其他东西在这个外壳内。

可运行的片段：

​

$('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不能战胜填充，普通的块元素：小提琴演示也不能

实现该功能的一种方法是为文本添加一个额外的包装器，并在其上设置填充/边框，而不是flex项。

​

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

​