Nested flex-shrink not working on nested div

Question

Having some trouble to make a nested div shrink in a flex scenario.

It's a simplification of Material-UI chips, the idea is the chips to shrink their text when a line is full.

A simplified div structure looks like (we want the inner span to shrink) :

<div class="papa">
  <div class="child child1">Fixed-<span class="span">This is a long text that we want to shrink with ellipsis</span>-End</div>
  <div class="child child2">Fixed-<span class="span">This is a long text that we want to shrink with ellipsis</span>-End</div>
  <div class="child child3">Fixed-<span class="span">This is a long text that we want to shrink with ellipsis</span>-End</div>
</div>

How to make the inner span to shrink when there is no avaible space ?

Code example :

https://codepen.io/iccube/pen/abBgayz

Berci · Answer 1 · 2021-03-22T08:43:24.660

Just give the div with the class .child the ellipsis prop (like this):

LATER EDIT: I edited the code. I replaced the span with a div. (You can replace the div back to a span and add display: block to the .span class. But this is cleaner I think.) Basically you have to make sure that the text container will have the desired width, and since you cannot provide a fixed value for the width, the text you want to be truncated should have display: block

.papa {
  display: flex;
  flex-direction: row
  background-color: red
    oveflow: hidden;
}

.child {
  display: flex;
  white-space: nowrap;
  overflow: hidden;
}
.span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.child1 {
  background-color: lightblue;
}
.child2 {
  background-color: lightgreen;
}
.child3 {
  background-color: lightcoral;
}

<div class="papa">
  <div class="child child1">Fixed-<div class="span">This is a long text that we want to shrink with ellipsis</div>-End</div>
  <div class="child child2">Fixed-<div class="span">This is a long text that we want to shrink with ellipsis</div>-End</div>
  <div class="child child3">Fixed-<div class="span">This is a long text that we want to shrink with ellipsis</span>-End</div>
</div>

You can read more about overflow ellipsis here

Thanks, that was a trick ;-). But, I forgot to add another element after the End (I've updated the question). I just want the inner span to shrink... — ic3, Mar 19 '21 at 10:25
Than you could take ssaakkaa ' s response and add `display: flex; width: 33%;` to the `.child` class and you should be good :D — Berci, Mar 19 '21 at 10:45
Check the updated code from the answer please. If I understand correctly this should do it. — Berci, Mar 19 '21 at 12:56

ssaakkaa · Answer 2 · 2021-03-19T13:09:34.563

1

You need to specify width of the ".child" elements so flex know what to do with them. Solution is very simple here is the code you need to change:

.child {
  flex-shrink: 1;
  white-space: nowrap;
  display: flex;
  width: 33.33%;
}

one more thing if you need ".papa" element to have some max-width, you can just set the max-width like this:

.papa {
  display: flex;
  flex-direction: row;
  background-color: red;
  //SET YOUR MAX WIDTH
  max-width: 500px;
}

EDIT: If I understand you correctly you want this behaviour: https://codepen.io/ssaakkaa/pen/mdOZaJO

for that, you need to set overflow:hidden on the child elements

edited Mar 19 '21 at 13:09

answered Mar 19 '21 at 09:52

ssaakkaa

390
2
6

It's chips, so they should be aligned left and grow till they take the whole width. Than shrink. 33% will make the parent div divided in 3 equal parts – ic3 Mar 19 '21 at 10:54
Sorry, one single line -> .papa { flex-wrap: nowrap; } – ic3 Mar 19 '21 at 11:59
yes, like Bercy said then... the child needs overflow: hidden attribute :) – ssaakkaa Mar 19 '21 at 13:09

Nested flex-shrink not working on nested div

2 Answers2