How to ellipsis content in grid layout auto-width container cell?

Question

There is a div with grid layout and fixed width.

One of its children is a container and has auto width through template.

Inside the container, here is the content I would like to make ellipsis.

It seems the container's width is incorrect, it does not equal to 300px - 30px - 50px. How can I change this?

div {
  box-sizing: border-box;
}

.grid-layout {
  width: 300px;
  display: grid;
  grid-template-columns: 30px auto 50px;
}

.left {
  grid-column-start: 1;
}

.ellipsis-container {
  grid-column-start: 2;
}

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

.right {
  grid-column-start: 3;
}

<div class="grid-layout">
  <div class="left">Left</div>
  <div class="ellipsis-container">
    <div class="ellipsis-content">Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long</div>
  </div>
  <div class="right">Right</div>
</div>

I believe that your question is more towards why the container size isn't 220px as expected. I've provided an [explanation below](https://stackoverflow.com/a/61707793/9060223) ;-) — Richard, May 10 '20 at 06:13

Richard · Answer 1 · 2020-05-10T07:18:52.000

Adding an overflow to the container works.

Question

However, your question is more directed towards why doesn't the value of auto in my container resolve to 300px-30px-50px? It should have been 220px, but why is it extending to 600px+?

Answer

This happens because of white-space: nowrap. The text is unable to wrap, causing it to extend its width to a very long value. However, why does the container also extend when its child extends? Shouldn't auto have resolved to 220px even when its child extends more than that value? It is because in this case, auto is identical to the value max-content. This means that the auto value will resolve to max-content. max-content will then resolve to the largest max-content contribution value of that specific column. What is max-content contribution then? It is width value of the "children" of the column which causes the max-content size of the container to change (in this case, the container is column). max-content itself refers to minimum size that is allowed, but still fitting all the content inside without overflowing. Your nowrap text is very long and its max-content size is 600px+. This is why the container resolves to 600px+ too (because auto resolves to the largest max-content contribution).

div {
  box-sizing: border-box;
}

.grid-layout {
  width: 300px;
  display: grid;
  grid-template-columns: 30px auto 50px;
}

.left {
  grid-column-start: 1;
}

.ellipsis-container {
  grid-column-start: 2;
  overflow-x: hidden;
}

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

.right {
  grid-column-start: 3;
}

<div class="grid-layout">
  <div class="left">Left</div>
  <div class="ellipsis-container">
    <div class="ellipsis-content">Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long</div>
  </div>
  <div class="right">Right</div>
</div>

Could you please explain why and how `overflow: hidden` resolves this? Thanks. — Mike, May 10 '20 at 06:39
@Mike I'm not sure about that. Your best bet would be to read the spec about the algorithm to resolve track sizing. My **personal** hunch says that the initial width of the column is resolved to 220px, but then the item inside extends its container size because of that `max-content contribution` spec (try emptying the content div and use JS to inject the long content after a delay [remove the overflow on the item]). Also, you might want to read (on a different perspective) about why content can extend a grid item [here](https://stackoverflow.com/a/43312314/9060223). — Richard, May 10 '20 at 07:21

score 1 · Answer 2 · answered May 10 '20 at 05:57

Add overflow to container .ellipsis-container also.

.ellipsis-container {
  grid-column-start: 2;
  overflow-x: hidden;
}

div {
  box-sizing: border-box;
}

.grid-layout {
  width: 300px;
  display: grid;
  grid-template-columns: 30px auto 50px;
}

.left {
  grid-column-start: 1;
}

.ellipsis-container {
  grid-column-start: 2;
  overflow-x: hidden;
}

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

.right {
  grid-column-start: 3;
}

<div class="grid-layout">
  <div class="left">Left</div>
  <div class="ellipsis-container">
    <div class="ellipsis-content">Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long</div>
  </div>
  <div class="right">Right</div>
</div>

How to ellipsis content in grid layout auto-width container cell?

2 Answers2

Question

Answer