Flexbox row: doesn't grow according to content? [duplicate]

Question

I have the following structure, and I'd like to understand why my row does not grow with its inner content.

.row {
  border:solid red;
  display: flex;
  flex-direction: row;
}


.cell {
  border: solid green;
  flex: 0 0 400px;
}

<div class="row">
  <div class="cell">
   cell 1
  </div>
  <div class="cell">
   cell 2
  </div>
  <div class="cell">
   cell 3
  </div>
</div>

JsFiddle

I don't want the cells to grow or shrink, they should always be 400px width. The parent should grow and overflow the window, and an horizontal scrollbar is expected.

In the above example, the red border should be around the green border. The green border has the expected dimensions, not the red one.

I don't want to set a static width to my row for maintainability reasons related to my usecase.

I'm open for non-flexbox solutions (see inline-block attempt), but would appreciate more a flexbox one (because I need align-items: center behavior on the row)

@DanielBernardi I don't feel it's related, I don't have a column not a flexwrap behavior. Why do you link to this answer please? — Sebastien Lorber
– Sebastien Lorber, Commented Aug 23, 2018 at 17:17
flex: 0 0 400px You've explicitly told it not to grow or shrink, and be 400px wide. Why use flexbox at all? — Adam Jenkins
– Adam Jenkins, Commented Aug 23, 2018 at 17:38
Have you read this question? or this one? You can use display: inline-flex instead of just flex, and then use width: 400px for .cell, removing flex: 0 0 400px to achieve what you need. — pazitos10
– pazitos10, Commented Aug 23, 2018 at 17:41
@pazitos10 actually this is to be what I'm looking for, maybe you can post an answer? jsfiddle.net/slorber/v6xp917z/25 — Sebastien Lorber
– Sebastien Lorber, Commented Aug 23, 2018 at 17:51

clementoriol · Accepted Answer · 2018-08-23 17:52:21Z

6

If you want your container to always match the width of it's children, you'll need to look into display: inline-flex.

display: flex behaves more like a container with a width of 100%

Here's a fiddle that should work: http://jsfiddle.net/hnrs64fm/

answered Aug 23, 2018 at 17:52

clementoriol

1685 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Michael Benjamin Over a year ago

The solution is not really inline-flex, since you also have to switch from flex-basis to width for the layout to work. The problem is actually a browser bug.

Sebastien Lorber Over a year ago

thanks @Michael_B the link you provided was helpful to solve this simple js fiddle. Unfortunately I still have problem in my global layout, here is a related question: stackoverflow.com/questions/52000363/…

Collectives™ on Stack Overflow

Flexbox row: doesn't grow according to content? [duplicate]

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related