Using Flex-basis To Control The Number Of Items Displayed On The Line

I want to push elements out in order to hide them while using flex. For example, if flex-basis is 50%, show only two items flexed into the given space while the other elements are

Solution 1:

In addition to flex-basis, use the flex-grow and flex-shrink properties to control sizing.

More specifically:

• flex-grow: 0
• flex-shrink: 0
• flex-basis: 50% (or whatever you want it to be)

This tells flex items: don't grow, don't shrink, be a fixed percentage width

You can combine all these properties into one rule with the flex shorthand property:

flex: 0050%;       /* two items will show, OR... */flex: 0025%/* four items will show, OR... */
flex: 0020%/* five items will show */

Here's the full code:

.bargraph {
  display: flex;
  overflow: hidden;
  background: red;
}
.bargraph>dt {
  flex: 0050%;
}

<dlclass="bargraph"><dt>test</dt><dt>test</dt><dt>test</dt><dt>test</dt><dt>test</dt><dt>test</dt></dl>

Revised Fiddle

Solution 2:

you can try using this in your CSS file

bargraph>dt{
 min-width: 10em;
}

This should be a good alternative and you can put the value based on the parent width.

Hope this helps

Take care and Happy coding..