How To Shrink Large Flex-box Children First?

I want to build a breadcrumb control for a web application. The text in each flex-box child should be truncated whenever the space in the container is not large enough to display e

Solution 1:

With flexbox I guess the option is to make the flex items stretch by an equal amount by giving flex: 1 to the child element (but this has the downside that the child items do not have auto width) - see demo below:

.container {
  display: flex;
  width: 600px;
}

.child {
  font-size: 30px;
  margin: 010px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  border: 1px solid blue;
  flex: 1;
}

<divclass="container"><divclass="child">
    Link A
  </div><divclass="child">
    Link B
  </div><divclass="child">
    Link C this is a really long link with lots of text
  </div></div>

Using CSS Grid layout, you can achieve this easily:

1. Use display: grid on the container.

2. Add grid-template-columns: repeat(3, auto) to make three columns of auto width

See demo below:

.container {
  display: grid; /* defines a grid container */grid-template-columns: repeat(3, auto); /* all three columns with auto width */width: 600px;
}

.child {
  font-size: 30px;
  margin: 010px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  border: 1px solid blue;
}

<divclass="container"><divclass="child">
    Link A
  </div><divclass="child">
    Link B
  </div><divclass="child">
    Link C this is a really long link with lots of text
  </div></div>

Solution 2:

I think you are searching for flex-shrink, flex-grow and flex-basis, for more read this

.container {
  display: flex;
  width: 300px;/*I changed this just for testing*/
}

.child {
  flex: 1133%;/*Add this line*/font-size: 30px;
  margin: 010px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;  
}

<divclass="container"><divclass="child">
    Link A
  </div><divclass="child">
    Link B
  </div><divclass="child">
    Link C this is a really long link with lots of text
  </div></div>

Solution 3:

Have you tried to set width to childs?

.container {
  display: flex;
  width: 600px;
}
.child {
  font-size: 30px;
  margin: 010px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;  
  width: 200px;
} 

<divclass="container"><divclass="child">Link A</div><divclass="child">Link B</div><divclass="child">Link C this is a really long link with lots of text</div></div>

Solution 4:

You can add minimum width of smaller children which you want to display full

.container {
  display: flex;
  width: 600px;
}
.child {
  font-size: 30px;
  margin: 010px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  min-width:86px;
}

<divclass="container"><divclass="child">Link A</div><divclass="child">Link B</div><divclass="child">Link C this is a really long link with lots of text</div></div>