Maximizing a popups/tooltips width inside responsive flexbox HTML webpage using CSS only

My situation and goal

My webpage is layouted like in the code snippet. The nav content is dynamic, so I do not know the width of it, same with the content after the tooltipcontainer. Therefore I cannot compute the width of the remaining page right of tooltipcontainer using CSS (to my knowledge). However, I want to maximize the tooltips width within the webpage without expanding the webpages width, because the text I need to put inside the tooltip is longer than 3 words. I want to achieve this without JavaScript, at least have a CSS fallback. In case JavaScript is not working, I still want a working webpage.

My Ideas (which all do not work):

To my understanding, the tooltip itself needs to be inside tooltipcontainer to be able to position the popups left relative to the left of tooltipcontainer. However, if the tooltip is relative to tooltipcontainer, its width can also only be relative to tooltipcontainer or absolute. Absolute does not work, because I don't know the width of my nav. I also cannot calc() the width of the popup, because I cannot use the actual width of another element (e.g. nav) in the calculation. I could set width:max-content for the popup, but then it can also widen the viewport/page (create scollbars which cannot be reached with the mouse without exiting the hover area of tooltipcontainer and tooltip). There is also no max-right CSS property which could be used to restrict the right border of my popup to the right border of main or the viewport.

My best bet?

If I have not overseen anything, then I can only set popup width:60vw and main min-width:65vw at least for this single page, so it can be horizontally scrolled when leaving tooltipcontainer and the tooltips hover area - breaking dynamic design but at least making the content available in any circumstance.

I will accept a solution to my problem, or, if there is none, a confirmation that there is none, as a valid answer.

Edit

A positional detachment of tooltip and tooltipcontainer is not an option for me. On a large screen, I would not even recognize the tootip at the very bottom, as suggested in an answer.

Edit 2

Added another idea into the snippet, which at least solves the problem for some uses. Hopefully someone extends on that idea, so that it can be used universally, including multiline flowtext.

.flexcontainer                      {display:flex}
main                                {flex:auto}
nav, main, div, span                {border:1px solid black;
                                     margin:0.2em;
                                     padding:0.2em}
ul                                  {margin:0; 
                                     padding:0 0 0 1.2em}
.tooltipcontainer                   {position:relative}
.tooltip                            {display:none;
                                     background-color:lightyellow;
                                     position:absolute;
                                     top:100%;
                                     left:0;
                                     border:1px solid grey}
.tooltipcontainer:hover .tooltip    {display:initial}

.tooltipanchor2                     {flex:auto;
                                     position:relative}
.tooltip2                           {display:none;
                                     background-color:lightyellow;
                                     position:absolute;
                                     top:1em;
                                     left:0;
                                     z-index:1000;
                                     border:1px solid grey
                                     width:max-content;
                                     max-width:100%}
.tooltipcontainer2:hover .tooltip2  {display:initial}

<div class="flexcontainer">
  <nav>
    <ul>
      <li>item 1</li>
      <li>long item 2</li>
      <li>item 3</li>
    </ul>
  </nav>
  <main>
    <span>content before tooltipcontainer</span>
    <span class="tooltipcontainer">
      has tooltip
      <div class="tooltip" style="width:max-content">
        This is a tooltip with very long text that is so long that it expands the width of the webpage without breaking the line. Unfortunately, the page cannot even easily be scrolled horizontally without the mouse leaving this area, but leaving this area means that this text is hidden and the webpage is small again.
      </div>
    </span>
    <span>content after tooltipcontainer</span>
    <h3>Edit: another try</h3>
    Caveat: "more content" cannot be in multiline flowtext
    <div class="flexcontainer">
      <div style="white-space:nowrap">content before tooltipcontainer</div>
      <div class="tooltipanchor2">
        <span class="tooltipcontainer2">
          has tooltip
          <div class="tooltip2">
            This is a tooltip with a very long text. The text is so long that it breaks the line, even if the code snipped is displayed in fullscreen. This text is for demonstration purposes only.
          </div>
        </span>
        <span>content after tooltipcontainer that breaks the line, which does not continue underneath "content before tooltipcontainer"</span>
      </div>
    </div>
  </main>
</div>