Control the height and width of any element, you can use both percentages and pixels.

0 to 100 percent

Widths / heights are available for each percent up to 100%.

0 to 101 pixels

Widths / heights are available for each pixel up to 101px.

100 to 900 pixels

Widths / heights are available for every 25 pixels... 100px, 125px, 150px, ...

• f-w-100 - width: 100%
• f-w-max-100 - max-width: 100%
• f-w-min-50 - min-width: 50%

• f-h-40px - height: 40px
• f-h-max-200px - max-height: 200px
• f-h-min-125px - min-height: 120px

  <div f-w-30px f-h-30px></div>
  <div f-w-40px f-h-40px></div>
  <div f-w-50px f-h-50px></div>
  <div f-w-60px f-h-60px></div>
  <div f-w-70px f-h-70px></div>
  <div f-w-80px f-h-80px></div>
  <div f-w-90px f-h-90px></div>
  <div f-w-100px f-h-100px></div>

  <div  f-w-30px f-h-100px></div>
  <div  f-w-40px f-h-100px></div>
  <div  f-w-50px f-h-100px></div>
  <div  f-w-60px f-h-100px></div>
  <div  f-w-70px f-h-100px></div>
  <div  f-w-80px f-h-100px></div>
  <div  f-w-90px f-h-100px></div>
  <div  f-w-100px f-h-100px></div>

Width Percentage

 <div  f-bg-blue-100 f-flex f-row f-p-30px f-wrap>
  <div  f-w-10 f-h-100px f-bg-green-400></div>
  <div  f-w-15 f-h-100px f-bg-red-100></div>
  <div  f-w-25 f-h-100px f-bg-orange-900></div>
  <div  f-w-50 f-h-100px f-bg-red-500></div>
  <div  f-w-100 f-h-100px f-bg-blue-700></div>