0

I need the flex container to shrink to fit content when the items in the container wraps. The items need to be of a fixed width.

How does one do it?

Here is an example:

enter image description here

      .wrapper {
        display: flex;
        border: 1px solid red;
        flex-wrap: wrap;
      }
    
      .item {
        height: 40px;
        background-color: green;
        margin: 10px;
        width: 300px;
      }
    <div class="wrapper">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
Jose A. Ayllón
  • 866
  • 6
  • 19
pac w
  • 647
  • 6
  • 17
  • I don’t think there is an easy way to achieve this. `inline-flex` would be the first thing that comes to mind, but that seems to have the same issues as `inline-block` in that regard, outlined here, https://stackoverflow.com/questions/40097095/inline-block-div-not-shrinking-to-content Since your items are of a fixed width, I guess you can calculate the actual width to set over several breakpoints though. – 04FS Jun 05 '19 at 09:22
  • There can be a dynamic number of items with varying widths so I cannot set the breakpoints. :P – pac w Jun 05 '19 at 09:48
  • @pacw - a css grid layout might be what you're looking for - [something like this](https://stackoverflow.com/a/50718701/703717) – Danield Jun 05 '19 at 10:16

0 Answers0