I am trying to create an element that is centered within its parent, and grows centered, until it would grow into another element (a menu) that is absolutely positioned. These two elements are currently in different parents (mapped to the same area via a css-grid), but this can be changed if its not possible to accomplish my goal in the current arrangement. The menu is currently absolutely positioned to be in the top right of its parent. It could eventually grow in size; so it would be great if this could work w/ dynamic width sizing of the menu. I am currently using margin: auto to center the element and my goal is to accomplish this purely using CSS (without javascript).
The element should look like this if its smaller:
+----------------+--------+----------+------+
| |centered| | menu |
| |
| |
+-------------------------------------------+
And be able to grow, centered until it hits a right margin
+-------+--------------------------+-+------+
| | <- grows centered -> | | menu |
| |
| |
+-------------------------------------------+
Then it only grows to the left so it doesnt overlap the menu:
+-+--------------------------------+-+------+
| | <- grows that way now | | menu |
| |
| |
+-------------------------------------------+
The final diagram would also be the max width (it would grow in height only at this point).
I haven't been able to accomplish this w/o having the centered div get offset by the size of the menu at smaller widths.
The CSS for the 2 elements right 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/
