Child Span Element Getting Out Of Parent Element, Flexbox / Margin - Padding Issue

I read post on similar issue but still not able to get it working. I am trying to have text ellipses when there is big text. JSFiddle

Solution 1:

For the ellipsis to work when an ancestor is a flex item, all the children of the flex item and the flex item itself need overflow: hidden (or min-width: 0), and the flex item also need flex-shrink: 1 so it is allowed to shrink below its content.

Additionally, a flex item's min-width defaults to auto, which as well means it isn't allowed to be smaller than its content, hence the need of overflow: hidden (or min-width: 0).

So if you make the following changes it will work:

• add overflow: hidden to <span style="flex:0 1 auto; margin-right:10px; overflow: hidden">
• change flex-shrink to 1 in <span style="flex:0 1 auto; margin-right:10px; overflow: hidden">
• add overflow: hidden; to .textSpanInner

Fiddle demo

Note, I also swapped the imgDiv to a imgSpan as it is invalid to have a block element as a child of an inline element

Stack snippet

.fixIssue {
  align-items: center;
}

.thumbnail {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  object-fit: cover;
}

.imgSpan {
  border: 1px solid yellow;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.textSpanInner {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
}

.linkStyle {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<divstyle="height: 150px; border: 1px solid red;box-sizing:border-box"><spanclass="fixIssue"style="display:flex; justify-content:flex-start;flex-wrap:nowrap;height:100px; border:1px dotted green;"><spanstyle="flex:0 0 auto; margin-right:10px;"><spanclass="imgSpan"><imgsrc="https://dummyimage.com/68x68/d612e8/"class="thumbnail" /></span></span><spanstyle="flex:0 1 auto; margin-right:10px; overflow: hidden"><spanclass="textSpanInner"><ahref=""class="linkStyle">Big Name HereBig Name HereBig Name HereBig Name Here</a></span></span></span></div>

Solution 2:

To make text ellipsis, you just should set width property to the element in which the text is. For your case rewrite this:

.textSpanInner {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            width: 50px; //for example
}