Buttons outside of his flexbox - html

Question

Hello, i've lost half of my hair in 2 days, sorry for my english :)
If you resize the window the buttons in #header go outside of his container.
Here is the code:
#root {
background: grey;
display: flex;
flex-direction: column;
align-items: center;
}
#header {
background: red;
align-self: stretch; /* fill in main-axis */
flex: 0 0 65px; /* fixed height */
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
}
<div id="root">
<div id="header">
<button>PUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUSH</button>
<button>BYE.</button>
</div>
<----- resize me ---->
</div>
I think the problem is #root.width is leaded by window/body.width ?
I have a solution with min-content:
#root { min-width: min-content; ... }, but i don't want use this value.
How configure #root correctly acting as a good and beautiful container for my layout ?
Here is a codepen for playing: https://codepen.io/papawa/pen/NLKbKR

Answer 1

Simply there is no problem, it's a logical result, unless you decide what do you expect to get in a smaller screens then that's what you will get and the reason is that you have a button with a long 'one word text' and the solution to fix this is just by wrapping the text itself and that's how you do it:
overflow-wrap: break-word;
or
word-wrap: break-word;
Here's the overall result:
#root {
display:flex;
flex-direction: column;
align-items:center;
background:grey;
overflow:hidden;
}
#header {
align-self:stretch;
flex: 0 0 65px;
display: flex;
justify-content: space-between;
align-items: center;
background: red;
padding: 10px;
}
.btn{
width: 50vw;
/* These are technically the same, but use both */
overflow-wrap: break-word;
word-wrap: break-word;
}
<div id="root">
<div id="header">
<button class="btn">PUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUSH</button>
<button>BYE.</button>
</div>
<---- resize me ---->
</div>
FOR FURTHER READING: Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)