Как предотвратить выброс CSS сетки, чтобы многоточие при переполнении текста работало

Question

У меня возникли проблемы с CSS Grid "раздувается", из-за чего мое свойство text text-overflow: ellipsis не работает.

Я видел много сообщений по этому поводу и пробовал многое, но просто не понимаю, что я не так. Я могу воспроизвести на простом примере.

В моем случае я использую компонент третьей части, где я хочу поместить свой пользовательский интерфейс в один из его элементов.

Например, под element third-party-container - это компонент третьей части, а мой пользовательский интерфейс содержится в my-container m, где я wi sh, чтобы полностью заполнить third-party-container

HTML

<div id='third-party-container'>
  <div id='my-container'>
    <div id='s1'>S1</div>
    <div id='s2'>S2</div>
    <div id='s3'>aaaaaaaabbbbbbbbbbbccccccccccccccccccccccccccddddddddddddddd</div>
  </div>
</div>

CSS

    #third-party-container {
        height: 40px;
        width: 140px;
        background: orange;
    }

    #my-container {
        background: yellow;
        height: 100%;
        width: 100%;
        display:grid;
        align-items: center;
        justify-items: left;
        grid-template-columns: min-content 13px minmax(0, 1fr);
        grid-template-rows: 1fr;
        column-gap: 2px;
        white-space: nowrap;            
    }

    #s1 {
        background: red;  
         grid-row: 1;
         justify-items: left;
         grid-column: 1;          
         align-items: stretch;   
    }

    #s2{
        background: green;
        grid-row: 1;   
        overflow: hidden;               
        grid-column: 2;   
    }

    #s3 {  
        background: pink;
        grid-row: 1;      
        justify-items: left;
        display: grid;
        align-items: center;
        grid-column: 3;                                         
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;   
    }

Также доступно в этом Plunkr

Итак, в my-container у меня есть одна строка и 3 столбца. Первые два столбца имеют довольно небольшую ширину. Первые столбцы могут немного отличаться, но всегда будут довольно маленькими. Второй столбец просто зафиксирован.

Третий столбец s3 (цветной pink) - это столбец, который иногда может содержать более длинный текст, чем может поместиться в контейнерах. Однако именно это я вижу в приведенном выше примере ...

When I look at this in dev tools, I can see the s3 is "blowing out", ie not being contained within its container.

введите описание изображения здесь

Я уже обходил это раньше, используя minmax(0, 1fr), но здесь он не работает.

Внешний контейнер имеет фиксированную ширину, а my-container составляет 100% от это.

Что я делаю не так и как мне заставить это работать?

Answer 1

Проблема заключается в использовании display:grid на #s3. Удалите его и добавьте width:100%

#third-party-container {
  height: 40px;
  width: 140px;
  background: orange;
}

#my-container {
  background: yellow;
  height: 100%;
  display: grid;
  align-items: center;
  justify-items: left;
  grid-template-columns: min-content 13px minmax(0, 1fr);
  grid-template-rows: 1fr;
  column-gap: 2px;
  white-space: nowrap;
}

#s1 {
  background: red;
}

#s2 {
  background: green;
  overflow: hidden;
}

#s3 {
  background: pink;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  width:100%;
}

<div id='third-party-container'>
  <div id='my-container'>
    <div id='s1'>S1</div>
    <div id='s2'>S2</div>
    <div id='s3'>aaaaaaaabbbbbbbbbbbccccccccccccccccccccccccccddddddddddddddd</div>
  </div>
</div>