3

I have the following HTML elements:

enter image description here

  • green - main wrapper
  • orange - elements wrapper
  • red - counter
  • gray - input

The input has a fixed min width of 80px. The counter has a width of whatever the width of the text inside it has. The elements wrapper takes up the rest of the width.

The elements wrapper also has a flex-wrap: wrap property and an overflow: hidden, which means that any items that can't be fully displayed are hidden.

enter image description here

In my current example there is a gap between the last element ("4") in the elements wrapper and the counter. This gap doesn't have the required width to fit the next element ("5"). I'd like the input element to grow and take up that remaining space. Like so:

enter image description here

Said in other words, I'd like the elements wrapper to be as wide as possible in order to fit as many elements as possible, but without leaving empty gaps of "unused" space. The "unused" space should be filled by the input, which should "grow" when required.

Is this possible?

Demo: https://codesandbox.io/s/agitated-http-cxevki

alexandernst
  • 14,352
  • 22
  • 97
  • 197
  • Are the items inside wrapper fixed or dynamic? – Deepak Mukka Feb 20 '22 at 14:10
  • @DeepakMukka The elements inside the "elements wrapper" have a dynamic width. – alexandernst Feb 20 '22 at 14:13
  • I mean the number of elements, are they fixed (in the code we have 7 elements)? – Deepak Mukka Feb 20 '22 at 14:15
  • @DeepakMukka The number of elements is also dynamic. – alexandernst Feb 20 '22 at 14:16
  • If the elements are dynamic and their widths are dynamic, the result is not possible because if you take the example shown in image https://freeimage.host/i/1RsFgn, the inline style of just one row cannot be compromised to achieve the result, since flex is applied across whole wrapper – Deepak Mukka Feb 20 '22 at 14:22
  • @DeepakMukka In that case (as the one in your image), the elements "1" and "2" should be visible. Since there is no enough width to fit the third element ("3999999999"), the rest of the width of the main wrapper should be filled by the input. As so: https://freeimage.host/i/1Rb2ql – alexandernst Feb 20 '22 at 14:27
  • Yes i think that is not possible, since flex is applied whole wrapper div and that wrapper div has width of largest possible row/element, so that is the reason you can see white space since the 3999999 has largest width and the parent div adjusted as such – Deepak Mukka Feb 20 '22 at 14:32
  • 1
    this might help: https://stackoverflow.com/questions/37406353/make-container-shrink-to-fit-child-elements-as-they-wrap – Dirk J. Faber Feb 20 '22 at 17:41

0 Answers0