Jeanluca Scaljeri Jeanluca Scaljeri - 2 years ago 148
CSS Question

How to use fix widths inside a flexbox element?

I have a simple header in which I have a title and at the end some text + button:

<h1>Lorem ipsum dolor sit amet, consectetu</h1>
<span class="status">Lorem ipsum dolor</span>

With the following styling:

header {
align-items: center;
justify-content: space-between;
display: flex;
.status {
white-space: nowrap;


Initially (if enough space) it all looks fine, but when you resize and make it smaller you'll notice something weird. The button gets smaller and the text will overflow.

However, things get worse in Safari. Although the button shows more or less the same behaviour, but the
text moves to the right beneath button.

Any suggestions how to fix this


Chrome: enter image description here

Safari: enter image description here

Answer Source

In current Chrome, Firefox and Edge, your code seems to work as intended. The problem you mention doesn't exist.

However, for IE11 and Safari you will need to add flex-shrink: 0 to the button element. This will disable shrinking. (An initial setting of a flex container is flex-shrink: 1 on flex items.)

For a more in-depth explanation see the section The flex-shrink factor here:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download