Child span element getting out of parent element, flexbox / margin - padding issue

Question

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

.fixIssue {
  align-items: center;
}

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

.imgDiv {
  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;
}

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

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

Answer 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;
}

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

Answer 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
}