Buttons outside of his flexbox

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

For #root ? This doesn't work as expected, the #root width isn't equal to its content . — Mendes, Aug 19 '18 at 20:57
The "push" button still go outside of the container. I would like to not wrap my content #header. I will change my question, the idea is getting the same result as #root { ... min-width: min-content } without this value because this still experimental. — Mendes, Aug 19 '18 at 21:09
Possible duplicate of [flexbox | flex item being pushed out of containing div (off screen)](https://stackoverflow.com/questions/29638449/flexbox-flex-item-being-pushed-out-of-containing-div-off-screen) — Mendes, Aug 20 '18 at 13:37

Tarek.hms · Accepted Answer · 2018-08-20T23:13:24.613

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)

Thank you, that's clarify what I encountered – Mendes Aug 20 '18 at 13:20 — Mendes, Aug 20 '18 at 13:20

Buttons outside of his flexbox

1 Answers1