2

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)

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Sebastien Lorber
  • 89,644
  • 67
  • 288
  • 419
  • Try this one: https://stackoverflow.com/questions/33891709/when-flexbox-items-wrap-in-column-mode-container-does-not-grow-its-width – Daniel Bernardi Aug 23 '18 at 17:13
  • 1
    @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 Aug 23 '18 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 Aug 23 '18 at 17:38
  • Have you read [this](https://stackoverflow.com/questions/45043022/shrink-flexbox-container-to-content-size) question? or this [one](https://stackoverflow.com/questions/40141163/make-flex-items-take-content-width-not-width-of-parent-container)? 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 Aug 23 '18 at 17:41
  • @pazitos10 actually this is to be what I'm looking for, maybe you can post an answer? http://jsfiddle.net/slorber/v6xp917z/25/ – Sebastien Lorber Aug 23 '18 at 17:51
  • See the "Browser Bugs" section in the duplicate's accepted answer for an understanding of the problem. – Michael Benjamin Aug 23 '18 at 22:33

1 Answers1

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/

clementoriol
  • 168
  • 5
  • 1
    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. – Michael Benjamin Aug 23 '18 at 19:31
  • 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: https://stackoverflow.com/questions/52000363/flexbox-row-with-inline-flex-fixed-item-width-fixing-flex-basis-bug-not-wo – Sebastien Lorber Aug 24 '18 at 08:28