CODEWITHSUNDEEP
cssflexbox
Michael Baldry
Michael Baldry

Reputation: 2028

Flexbox going outside its container

I'm trying to make a header bar in which there are 3 elements, the first one takes up as much space as it can, while the other 2 take up as much as they need.

| title | button | button |

The problem happens when the title part is too wide. The content of it does not wrap and it just pushes the buttons off the screen.

Let me demonstrate with a codepen.

https://codepen.io/anon/pen/bqrpVg

Update

I see it working now, but can anyone explain what the values do to achieve what I want, instead of just telling me the solution, so I can understand it.

Upvotes: 9

Views: 54183

Answers (4)

Kushagra Shakya
Kushagra Shakya

Reputation: 1

<div class="row" >
<div class="col-2 mx-auto">
    <div class="p-3 bg-white rounded-4">
        <div class="d-flex align-items-center gap-3 py-3">
            <div class="d-flex align-items-center">
                <img src="https://picsum.photos/200/300" class="w-100">
            </div>
            <div class="d-flex flex-column gap-1 align-items-start text-light-gray overflow-hidden">
                <div class="fw-bold lh-1 w-100 text-truncate">Brand Name Private Limited A very Long Name</div>
                <div class="lh-1 fw-medium">Network Type</div>
            </div>
        </div>
    </div>
</div>

Visit https://codepen.io/kushagra99/pen/poQmBoZ for a working Example!

Upvotes: -1

Andrei V
Andrei V

Reputation: 7508

The problem here is that you're setting the buttons to shrink, while explicitly telling the title not to shrink. That means that the title will grab all of the space. Now, if you set flex: 1; on the title and remove flex: 0 1 auto; and flex-basis: content; from the buttons, it works as expected: the buttons are always shown and the content of the title is wrapped.

See the modified codepen.

When you're setting flex: 1 0 auto; you're enabling the growth (1) of a flex item and disabling its shrinking (0). So the browser will never shrink the title element in order to make room for the buttons.

When using flex: 0 1 auto; you're telling the browser that the flex item is not really important and, when there's not enough room, the flex item should shrink to make room for other elements.

Here's what my solution does:

  • it sets flex: 1; on the title, which tells the browser that the element can expand and can shrink; it also instructs to grab as much available space as possible;
  • the default values for the flex shorthand are 0 1 auto, which is not really needed;
  • finally, flex-basis: content is not really supported; see here.

Upvotes: 11

Aslam
Aslam

Reputation: 9680

Remove all properties from buttons. Just use display:flex on the container. That's it.

.container {
  width: 70%;
  background-color: #00f;
  display: flex;

}

.title {
  background-color: #f00;
  margin-right: 1rem;}

.button {
  background-color: #0f0;
  margin-right: 1rem;}

https://codepen.io/hunzaboy/pen/PpKNBm

Upvotes: 1

user7582130
user7582130

Reputation:

I have created this Codepen for you:

https://codepen.io/anon/pen/JWyXQd

Code added: 

flex-shrink: 0;
flex-flow: row wrap;
justify-content: flex-end;
align-items: flex-end;

I'm not sure that this exactly what you want but that is what I gathered.

Upvotes: 8

Related Questions