CODEWITHSUNDEEP
htmlcssflexbox
panta82
panta82

Reputation: 2721

How can flex-shrink win against padding?

I have a flex-box tag cloud that is being sized from the outside. I want tags inside it to be collapsible all the way down to zero if needed (an edge case). Right now, they will go only as far as 2x their padding.

Image

Basically, I need a way to make flex-shrink "win" against padding.

If possible, I'd like to achieve that without using overflow: hidden, as that will interfere with other stuff that is inside this enclosure.

Runnable snippet:

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

Anyone has an idea?

Upvotes: 1

Views: 936

Answers (1)

Asons
Asons

Reputation: 87251

flex-shrink can't win against padding, neither can a normal block element: fiddle demo

One way to make that work is to add an extra wrapper for the text and set padding/borders on it instead of the flex item.

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

Upvotes: 2

Related Questions