Text-Overflow Is Not Working When Using Display:Flex

text-overflow ellipsis not working in nested flexbox

There are two issues in your code preventing the ellipsis from working:

div.right contains div.header, which in turn contains the button and text.
div.right is a flex item in the main container (.container).
By default, a flex item cannot be smaller than the size of its content. The initial setting on flex items is min-width: auto.
This means that the length of your text, which is not wrapping, will set a minimum size for parent flex items. One way to enable flex items to shrink past their content is to set a flex item to min-width: 0.
You've done this already for the .content flex item, but it needs to be set on the .right item, as well.
You've got the .content element set to flex: 0 1 auto.
This tells the flex item to use the size of the content (flex-basis: auto). The text sets the size.
Instead, set the width to 0 and let the flex container distribute space, as necessary. You can do this with flex: 1 1 0, which is the same as flex: 1.

.container {  display: flex;  height: 100vh;}.left {  width: 200px;  background-color: yellow;}.right {  flex: 1;  background-color: blue;  color: white;  min-width: 0;             /* NEW */}.header {  background: red;  color: white;  display: flex;  flex-direction: row;}.header .content {  white-space: nowrap;  flex: 1;                  /* ADJUSTMENT */  text-overflow: ellipsis;  overflow: hidden;  min-width: 0;}.header .buttons {  background: green;  flex: 1 0 auto;}.header .content:hover {  white-space: normal;}

<div class="container">
  <div class="left">    content left  </div>  <div class="right">    <div class="header">      <div class="buttons">buttons</div>      <div class="content">        This content is really long and should wrap with ellipses, but for some reason it doesn't work when it's nested in a container with display: flex      </div>      <div class="buttons">buttons</div>    </div>    content right  </div>
</div>

text-overflow is not working when using display:flex

Your problem here is the lack of "flex-children". These would need to contain the styles to truncate an element, not the parent container.

Try moving the truncate properties to a separate .flex-child class like so:

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

Source and detailed explanation: https://css-tricks.com/flexbox-truncated-text/

text-overflow ellipsis on flex child not working

Add overflow: hidden; to .wrapper .child2.

Actually, as Mosh Feu suggests in his answer, min-width: 0 should also work, and does, cross browser, though IE is buggy and need overflow

The reason also the child2 need it, is because it is also a flex item, and flex item's, in this case min-width, defaults to auto, and won't allow it to be smaller than its content, so by adding overflow: hidden (or any value but visible), or min-width: 0, will let it.

function toggle() {  var el = document.querySelector('.el');  el.textContent = el.textContent === 'short' ? 'long long long text' : 'short';}

.wrapper {  display: flex;  width: 200px;  align-content: stretch;  padding: 5px;  min-width: 0;  border: 1px solid}
.wrapper .child2 {  flex-grow: 1;  overflow: hidden;}
.flex {  display: flex;  min-width: 0;}
.el {  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;}
.child1 {  background: red;}
.child2 {  background: lightblue;}
.child3 {  background: green;}
.wrapper>* {  padding: 5px;}

<div class="wrapper">  <div class="child1">child1</div>  <div class="child2">    <div class="flex">      <div class="el">long long long text</div>      <div>a</div>    </div>  </div>  <div class="child3">child3</div></div>
<button onclick="toggle()">Toggle ellipsis text</button>

text-overflow: ellipsis not working on nested flex container

You need to remove flex for .label and to align, use align-items: center; for its parent.

.parent-container {  align-items: stretch;  display: flex;  flex-flow: column nowrap;  width: 100%;}
.item-container {  border: 1px solid #ebf0ff;  border-radius: 0.25rem;  display: flex;  align-items: center;  flex-flow: row nowrap;  height: 3.25rem;  margin: 0.5rem 1rem;  padding: 0.5rem 1rem;}
.label {  flex-flow: row nowrap;  font-family: sans-serif;  font-weight: 500;  min-width: 0;  overflow: hidden;  text-overflow: ellipsis;  white-space: nowrap;}

<!DOCTYPE HTML>
<html>
<body>  <div class="parent-container">    <div class="item-container">      <span class="label">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>    </div>  </div></body>
</html>

ellipsis does not work (flexbox)

For text overflow to work you need a set width - set a width to your grid-row.

Also remove the display: flex from the grid-cell - see demo below:

.grid-row {  display: flex;  width: 250px;}.grid-cell {  /*display: flex;*/  flex-grow: 3;  flex-basis: 0;  /*align-items: center;*/  padding: 10px;  overflow: hidden;  white-space: nowrap;  text-overflow: ellipsis;}
.grid-cell:first-child {  flex-grow: 1;  justify-content: center;}

<div class="grid-row">  <div class="grid-cell">insert text here</div>  <div class="grid-cell">some text</div>  <div class="grid-cell">some more text here</div></div>

flex row exceeding page width, text-overflow: ellipsis not working

If I understood you correctly this is what you trying to achieve: Sample Image

If that is the case all you have to do is add this line:

const MovieContainer = styled.div`
  .
  .
  .
  flex-direction: row;
  flex-wrap: wrap;
`;

CSS text-overflow ellipsis not working in Grid / Flex

To make the ellipsis work you need to target the text not the container.

In your code, you are setting the ellipsis on the flex container (a grid item):

.gridItem {
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: calc(50px + 2vw);
    border:1px solid red;
}

The child of the container is the text. Except you can't apply any CSS directly to the text because it's an anonymous flex item (i.e., a flex item with no defined tags around it). So you need to wrap the text into an element and then apply the ellipsis code.

From this:

<div class="gridItem">Why no ellipsis on this div?</div>

To this:

<div class="gridItem"><span>Why no ellipsis on this div?</span></div>

Then you have to contend with the minimum sizing algorithm of flex items. This rule, set by default, states that a flex item cannot be smaller than its content along the main axis. The solution to this problem is to set the flex item to min-width: 0, which overrides the default min-width: auto.

.grid {  display: grid;  margin: auto;  width: 90%;  grid-template-columns: 2fr 15fr;}
.gridItem {  display: flex;  align-items: center;  height: calc(50px + 2vw);  border: 1px solid red;  min-width: 0;}
.gridItem > span {  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;}

<div class="grid">  <div class="gridItem"><span>Why no ellipsis on this div?</span></div>  <div class="gridItem"></div>  <div class="gridItem"></div>  <div class="gridItem"></div>  <div class="gridItem"></div>  <div class="gridItem"></div>  <div class="gridItem"></div>  <div class="gridItem"></div>  <div class="gridItem"></div>  <div class="gridItem"></div>  <div class="gridItem"></div>  <div class="gridItem"></div>  <div class="gridItem"></div>  <div class="gridItem"></div>  <div class="gridItem"></div>  <div class="gridItem"></div></div>