49150

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

Question:

This question already has an answer here:

<ul><li> <a href="/questions/34352140/what-are-the-differences-between-flex-basis-and-width" dir="ltr" rel="nofollow">What are the differences between flex-basis and width?</a> <span class="question-originals-answer-count"> 3 answers </span> </li> </ul>

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

<pre class="snippet-code-css lang-css prettyprint-override">.row { border:solid red; display: flex; flex-direction: row; } .cell { border: solid green; flex: 0 0 400px; } <pre class="snippet-code-html lang-html prettyprint-override"><div class="row"> <div class="cell"> cell 1 </div> <div class="cell"> cell 2 </div> <div class="cell"> cell 3 </div> </div>

<a href="http://jsfiddle.net/slorber/v6xp917z/1/" rel="nofollow">JsFiddle</a>

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 <a href="http://jsfiddle.net/slorber/v6xp917z/17/" rel="nofollow">inline-block attempt</a>), but would appreciate more a flexbox one (because I need align-items: center behavior on the row)

Answer1:

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: <a href="http://jsfiddle.net/hnrs64fm/" rel="nofollow">http://jsfiddle.net/hnrs64fm/</a>

Recommend

  • Oracle MERGE: only NOT MATCHED is triggered
  • Azure deployment virtual directory [duplicate]
  • Lock file for access on windows
  • error using selenium chromedriver on windows 7 64 bit
  • No session share and avoid navigation buttons in browser while opening application window
  • How to set the minimum SDK Build Tools version required in an Android Studio project?
  • Trouble using Runtime.getRuntime().exec
  • DB2 Unique Constraint over multiple Columns
  • disable EJS caching in production
  • using php to create an xml file from a mysql db
  • AngularJS Dynamic Directives inside ng-repeat
  • Sprite animation wobbly / jumping in IE11
  • Move elements from a listbox to another
  • How to manipulate content of a comment with Apache POI
  • Web scraping pdf files from HTML
  • Get the UTM tags with Facebook Marketing API
  • jQuery colorbox breaks postbacks in ASP.NET Web Forms
  • Filtering out choiceless polls in the Django tutorial causes polls in the index to duplicate
  • Videos won't upload
  • In metro, get all inherited classes of an (abstract) class?
  • Defer unused CSS
  • Modifying native query cannot have named parameter bindings?
  • Use AutoIt with java applications
  • How to define a custom accuracy in Keras to ignore samples with a particular gold label?
  • Java Collections.shuffle() weird behaviour [closed]
  • LINQ to populate treeview based upon grouping
  • Request Access Token in Postman for Azure Function App protected by Azure AD B2C
  • ASP.NET MVC 2 actions for the same route?
  • concise way of flattening multiindex columns
  • Floating parent div grows to hypothetical width of floating child div
  • Android: Unable to detect vertical plane
  • Send array to next viewcontroller iOs xcode [duplicate]
  • ssh remote server login script
  • Codeigniniter insert data through models and controller
  • customize soft keyboard key preview
  • How to use FirstOrDefault inside Include
  • PHP Permalinks.. how to change?
  • Running R's aov() mixed effects model from Python using rpy2
  • What does the “id” field in an Android “Google Play Music” broadcast intent correspond to?
  • ReferenceError: TextEncoder is not defined