Grid or table where divs in cells can be compressed

Question

I've got a table of data where in text in some cells can be lengthy. I'd like to truncate the text with an ellipsis. I can get this to work fine using either <table> or CSS Grid.

The problem is that I can't figure out how to do it when the middle div with the lengthy text contains more than just plain text. I'd like add an image, and a second line, and wrap the whole thing in a <div>. Somehow the grid isn't telling the middle div that it only gets so much space and has to be smaller, the way is does when the middle div contains only text.

Is there a magic CSS option that will tell the grid that this div can be resized and its elements can be truncated?

(I don't need to do this with CSS Grid. I could use a table. But I can't get that to work either.)

.mycontainer {
  display: grid;
  grid-template-columns: auto auto auto;
}
.mycontainer div {
  border: solid 1px;
  padding: 4px;
}

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

Works fine with just text:
<hr>
<div class="mycontainer">
  <div>First columm</div>
  <div class="ellip">Middle column contains lengthy line with lots of text that should be truncated. Second lengthy line with lots of text that should be truncated. </div>
  <div>Last column</div>
</div>


Doesn't work:
<hr>
<div class="mycontainer">
  <div>First column</div>
  <div>
    <div>A title here</div>
      <div class="ellip">Middle column contains lengthy line with lots of text that should be truncated. Second lengthy line with lots of text that should be truncated.   </div>
  </div>
  <div>Last column</div>
</div>