How to create a div that expands until it is centered, until it reaches the right edge (without the left edge)?

Question

I am trying to create an element that is centered inside its parent, and grows in the center until it turns into another element (menu) that is absolutely positioned. These two elements are currently located in different parents (displayed in the same area via a css grid), but this can be changed if it cannot be performed in the current location. The menu is currently absolutely positioned as being in the upper right corner of its parent. It can eventually grow in size; so it would be great if it could work with the dynamics of the menu screen width. I am currently using margin: auto to center an element, and my goal is to do this purely with CSS (without javascript).

An element should look like this if its smaller:

   +----------------+--------+----------+------+
   |                |centered|          | menu |
   |                                           |
   |                                           |
   +-------------------------------------------+

And to be able to grow, center until he reaches the right edge.

   +-------+--------------------------+-+------+
   |       |   <- grows centered ->   | | menu |
   |                                           |
   |                                           |
   +-------------------------------------------+

Then it grows only to the left, so it does not overlap the menu:

   +-+--------------------------------+-+------+
   | |      <-  grows that way now    | | menu |
   |                                           |
   |                                           |
   +-------------------------------------------+

The last chart will also be the maximum width (it will grow only at this point).

I could not do this without taking into account the centered div in order to reduce the size shift of the menu with a smaller width.

CSS for two elements now looks like this:

.menu {
  position: absolute;
  top: 10px;
  right: 10px;
}

.centered {
  margin: auto auto 10px auto;
}

This is a simplified version of my current state: https://jsfiddle.net/4rj1oacz/9/

Answer 1

Here is an idea using flexbox, but this is more a hacker pseudo-solution than a general one:

#parent {
  box-sizing:border-box;
  padding: 2px;
  border: 1px solid blue;
  display:flex;
}

#parent:before {
  content:"Menu";
  min-width:0;
  opacity:0;
}

#centered {
  margin:auto;
  height:100%;
  text-align:center;
  flex-basis:100px;
  background:green;
  animation:width-change 3s infinite linear alternate;
}

#menu {
  border: 1px solid red;
}

@keyframes width-change {
  from {
    flex-basis:100px;
  }
  to {
    flex-basis:200%;
  }
}

<div id="parent">
  <div id="centered">
     some content
  </div>
  <div id="menu">
    Menu
  </div>
</div>

Run code