How to stretch div vertically without providing size-related parameters in surrounding elements?

Question

For the record I am aware of such questions as, for example:

• Fill remaining vertical space with CSS using display:flex
• How to make a div 100% height of the browser window

However, unlike the above posts, in my case I have following constraint -- I am not specifying sizes for existing elements, I treat them as the "tiles", and since I see there is space on the screen I would like to add another element ("tile") stretching it vertically so it would take remaining space.

One could say I have full control over the new tile (sizes, and all), but not over surrounding content. They should adjust automatically to the fact there is new element, stretching out.

I.e. I would need (?) that my child tile would say to all parents "hey, give me more space". I don't want to manually go through all parent elements and change their parameters just to adjust for this new element.

Here is -- not working as intended -- example, css::

html, body {
  height: 100%;
  background-color: gray;
  margin:0;
}
.container {
  background: lightblue; 
  display: flex;
  justify-content: center;
  height:100%;
}

.box {
  flex:1;
  background: orange;
  align-self: center;
}

<div class="title">title</div>

<div>

  <span>no control</span>

  <!-- control here -->  
  <div class="container">
    <div class="box">my tile</div>
  </div>
  <!-- end of control here -->

</div>

Clarification: all other problems/posts assume you can set size of the outer container in pixels or fraction of the viewport. Here the assumption/constraint is it cannot be done. You can only edit/set size of the element which has to be stretched.