CSS text ellipsis to prevent grid overflow

Question

Hello and first of all I read all the answers that could have helped me:

1. CSS text-overflow ellipsis not working in Grid / Flex
2. CSS grids and text-overflow: ellipsis
3. Prevent content from expanding grid items

This is what my code looks like for now (it's better to check in full page):

#content {
  display: flex;
  min-height: 100vh;
}
#news {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  margin: 5px;
  border: 2px solid white;
  border-radius: 30px;
  font-family: 'Caviar Dream';
  background-color: rgba(255, 255, 255, 0.5);
  font-size: 1.5em;
  color: #5a849d;
  padding: 10px;
}

#une {
  flex: 0 1 40%;
}

.grid {
  flex: 0 1 60%;
  display: grid;
  margin: auto;
  width: 90%;
  height: 100%;
  grid-template: repeat(3, 1fr) / 1;
}

.gridItem {
  display: flex;
  align-items: center;
  /* height: calc(20px + 2vw); */
  border: 1px solid red;
  min-width: 0;
}

.gridItem > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#lastNews {
  flex: 0 1 60%;
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  grid-gap: 10px;
}


#news .new:nth-of-type(1) {
  grid-column: 1;
  grid-row: 1/4;
  border: 1px solid black;
}

#news .new:nth-of-type(2) {
  grid-column: 2;
  grid-row: 1/4;
  border: 1px solid black;
}

#folder1 {
  grid-column: 3;
  grid-row: 1;
  border: 1px solid black;
}

#folder2 {
  grid-column: 3;
  grid-row: 2;
  border: 1px solid black;
}

#folder3 {
  grid-column: 3;
  grid-row: 3;
  border: 1px solid black;
}

  <div id="content">
  
  <div id="news">
    <div id="une">
      LOL
    </div>
    <div id="lastNews">
      <div class="new grid">
        <div class="gridItem">
          Title
        </div>
        <div class="gridItem">
          <span>
            ACTU1 veqvn evove, vfdkvn qv^sojcoigv jôfviqsdn vqs^
            qef ôsfn vpoin zfionzfq
            zq o vqoinv oin sqv rieuh fq
            qf sdifbpqdf ouzfzqpiufj epquh requestAnimationFramegq spidfbfd
             pizqfb psdqifbnq ôiqsdf
             F POFDB PFDSOFNDS FOQNFS
               ACTU1 veqvn evove, vfdkvn qv^sojcoigv jôfviqsdn vqs^
               qef ôsfn vpoin zfionzfq
               zq o vqoinv oin sqv rieuh fq
               qf sdifbpqdf ouzfzqpiufj epquh requestAnimationFramegq spidfbfd
                pizqfb psdqifbnq ôiqsdf
                F POFDB PFDSOFNDS FOQNFS
                  ACTU1 veqvn evove, vfdkvn qv^sojcoigv jôfviqsdn vqs^
                  qef ôsfn vpoin zfionzfq
                  zq o vqoinv oin sqv rieuh fq
                  qf sdifbpqdf ouzfzqpiufj epquh requestAnimationFramegq spidfbfd
                   pizqfb psdqifbnq ôiqsdf
                   F POFDB PFDSOFNDS FOQNFS
          </span>
        </div>

      </div>
      <div id="folder1">
        Folder 1
      </div>
      <div id="folder2">
        Folder 2
      </div>
      <div id="folder3">
        Folder 3
      </div>
    </div>
  </div>
  
  </div>

You see that the ellipsis I have shortens my text at the first line. What I would like is to have the text ellipsed only when it reaches the end of the grid cell. I tried a lot of combinations, without success... Any help would be great :)