Dynamic NavBar in which the logo is always in the middle - html

Question

My goal: A responsive navbar where the logo is always in the middle and an element
is always on the left. Depending on the context (page dependent), buttons can be
displayed in the right area or not.
My approach: I use a flexbox for the navbar. I have three divs in the flexbox. I have given all divs a fixed width. The middle box is also a flexbox. The div with a logo is located there. I position the logo on the right edge of the middle flexbox. The div with the logo has a fixed width (80px).
The problem: The approach works but I don't find this way very nice. Because the widths are dependent on each other. If you would change the logo and it would be wider or narrower then you would have to adjust the relative width of the middle and right box. The second problem is if the device smaller as 900px then this solution dont work.
Question: What other possibilities are there and what possibilities would resolve this "width" dependency?
#app {
margin: 0 auto;
max-width: 900px;
width:100%;
}
header {
height: 80px;
display: flex;
justify-content:space-between;
}
.header-left {
width:20%;
background: green;
}
.header-middle {
width:34%;
background: gray;
display: flex;
justify-content:flex-end;
}
.header-right {
width:46%;
background: green;
}
.logo {
background-color: red;
width:80px;
height: 80px;
text-align:center;font-size:70px;
}
<div id="app">
<small>width: 900px</small>
<header>
<div class="header-left">Burger Menu</div>
<div class="header-middle">
<div class="logo">
I
</div>
</div>
<div class="header-right">Context Buttons</div>
</header>
<div>
<div style="width:50%; background: black;color:white; text-align:center;">Controller Div 50%</div>
</div>
</div>

Answer 1

You can use flex-grow: 1 on the left and right elements, the middle element will be in center naturally. In this case, you don't need to set widths on elements.
#app {
margin: 0 auto;
max-width: 900px;
width:100%;
}
header {
height: 80px;
display: flex;
justify-content:space-between;
}
.header-left {
flex-grow: 1;
background: green;
}
.header-middle {
background: gray;
display: flex;
justify-content:flex-end;
}
.header-right {
flex-grow: 1;
background: green;
}
.logo {
background-color: red;
width:80px;
height: 80px;
text-align:center;font-size:70px;
}
<div id="app">
<small>width: 900px</small>
<header>
<div class="header-left">Burger Menu</div>
<div class="header-middle">
<div class="logo">
I
</div>
</div>
<div class="header-right">Context Buttons</div>
</header>
<div>
<div style="width:50%; background: black;color:white; text-align:center;">Controller Div 50%</div>
</div>
</div>

Answer 2

Since you're looking for different possibilities i'll suggest you to take the approch used by Tepken Vannkorn :
Centering brand logo in Bootstrap Navbar

Answer 3

Based on your comments, I would suggest the following code as a simple solution.
I have added a max-width value to your .logo CSS class and I have also moved your inline CSS from the front-end code, and created a .controller CSS class for it.
#app {
margin: 0 auto;
max-width: 900px;
width: 100%;
}
header {
height: 80px;
display: flex;
justify-content: space-between;
}
.header-left {
width: 20%;
background: green;
}
.header-middle {
width: 34%;
background: gray;
display: flex;
justify-content: flex-end;
}
.header-right {
width: 46%;
background: green;
}
.logo {
background-color: red;
width: 80px;
height: 80px;
text-align: center;
font-size: 70px;
max-width: 80px;
}
.controller {
width: 50%;
background: black;
color: white;
text-align: center;
}
<div id="app">
<small>width: 900px</small>
<header>
<div class="header-left">Burger Menu</div>
<div class="header-middle">
<div class="logo">
I
</div>
</div>
<div class="header-right">Context Buttons</div>
</header>
<div>
<div class="controller">Controller Div 50%</div>
</div>
</div>

Answer 4

A solution would be to use a mix of flex and position: absolute. Then you need only the left and the right container. the logo you can center with position left: left: calc(50% - calc(80px / 2));. The 80px is the width from your logo.
* {
margin: 0;
padding: 0;
}
#app {
margin: 0 auto;
max-width: 900px;
width:100%;
}
.header {
display: flex;
justify-content: space-between;
height: 80px;
background: yellow;
position: relative;
}
.header-left {
background-color: green;
width: 20%
}
.header-right {
background-color: green;
width: 44%;
}
.logo {
background-color: red;
width:80px;
height: 80px;
text-align:center;
font-size:70px;
position: absolute;
left: calc(50% - calc(80px / 2));
}
<div id="app">
<div class="header">
<div class="header-left">left</div>
<div class="logo">X</div>
<div class="header-right">right</div>
</div>
<div style="width:50%; background: black;">Controller Div 50%</div>
</div>