HTML Academy
Calculating the total size with flex-shrink
Flexbox, part 213/28
Back to the list of tasks
  • 1. Flex items and the block model
  • 2. Features of the margin property
  • 3. Alignment and margins
  • 4. The flow direction of the main axis and margins
  • 5. The initial main size of flex item, flex-basis
  • 6. Test: Cubism
  • 7. The item growth factor, flex-grow
  • 8. Growing items proportionally
  • 9. Calculating the total size with flex-grow
  • 10. The item shrinkage factor, flex-shrink
  • 11. Shrinking items proportionally
  • 12. Calculating the total size with flex-shrink
  • 13. flex-shrink and min-width
  • 14. Test: Mastering factors
  • 15. The flex shorthand property
  • 16. Multi-line flex containers and flex-shrink
  • 17. Multi-line flex containers and flex-grow
  • 18. flex-basis: 100% and flex-wrap
  • 19. The heading with description in flexboxes
  • 20. Heading with description, part 2
  • 21. Flexible menu with overflowing content
  • 22. Flexible menu with overflow, part 2
  • 23. Input fields with dynamic width
  • 24. The course card
  • 25. Course card, part 2
  • 26. Course card, part 3
  • 27. So many cards
  • 28. Test: Flexible flows
Test: Mastering factors
  • Sign up
  • Log in

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

flex-shrink and min-width

In order to solve the previous assignment, the factors must be 1 and 1.

Let’s calculate the sizes of the items from the previous assignment and make sure that the described algorithm is correct.

Negative space = 200px - 100px - 300px = -200px

The total product of the factor sizes = (1 * 100px) + (1 * 300px) = 400px

Normalized factor for item 1 = (1 * 100px) / 400px = 0.25
Normalized factor for item 2 = (1 * 300px) / 400px = 0.75

Total size of item 1 = 100px - (200px * 0.25) = 50px
Total size of item 2 = 300px - (200px * 0.75) = 150px

There are several subtleties regarding how flex items can be shrunk:

  • The items are shrunk to fit within the bounds of their basic sizes, and the inner margins and frames are not shrunk.
  • “Restrictive” properties, such as min-width, are applied to items only after the stage when free space or negative space is redistributed.

And these subtleties can lead to unexpected effects if the items overflow outside of the flex container. Let’s experiment.

Comments

  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>flex-shrink and min-width</title> <link href="course.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> </head> <body class="world world-flat"> <div class="spot"> <div class="skate no-width racoon-green"></div> <div class="skate no-width racoon-brown"></div> <div class="ruler ruler-green w-75">75px</div> <div class="ruler ruler-brown w-225 l-75">225px</div> <div class="ruler ruler-negative w-100 l-300">−100px</div> </div> </body> </html>
CSS
.spot { display: flex; margin-left: 50px; padding: 10px 0; width: 300px; height: 200px; } .racoon-green { flex-shrink: 1; flex-basis: 100px; } .racoon-brown { flex-shrink: 1; flex-basis: 300px; }

What didn’t you like in this task?

Thanks! We’ll fix everything at once!

The code has changed, click “Refresh” or turn autorun on.

You’ve gone to a different page

Click inside the mini-browser to shift the focus onto this window.

100%
Goalscompleted
0
    1. Assign a zero shrinkage factor to the Brown Raccoon (.racoon-brown).
    2. Then assign a minimum width of 50px
    3. as well as 25px inner margins to the Green Raccoon (.racoon-green).

    Cookies ∙ Privacy ∙ License Agreement ∙ About ∙ Contacts ∙ © HTML Academy OÜ, 2019−2025

    VISAMastercard

    Log in

    or

    Forgot your password?

    Sign up

    Sign up

    or
    Log in

    Restore access

    Have you forgotten your password or lost access to your profile? Enter your email connected to your profile and we will send you a link to restore access.

    Forgot to connect your email to the profile? Email us and we’ll help.