0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>In order to solve the previous assignment, the factors must be 1 and 1.</p>
1
<p>In order to solve the previous assignment, the factors must be 1 and 1.</p>
2
<p>Let’s calculate the sizes of the items from<a>the previous assignment</a>and make sure that the described algorithm is correct.</p>
2
<p>Let’s calculate the sizes of the items from<a>the previous assignment</a>and make sure that the described algorithm is correct.</p>
3
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<p>There are several subtleties regarding how flex items can be shrunk:</p>
3
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<p>There are several subtleties regarding how flex items can be shrunk:</p>
4
<ul><li>The items are shrunk to fit within the bounds of their basic sizes, and the inner margins and frames are not shrunk.</li>
4
<ul><li>The items are shrunk to fit within the bounds of their basic sizes, and the inner margins and frames are not shrunk.</li>
5
<li>“Restrictive” properties, such as min-width, are applied to items only after the stage when free space or negative space is redistributed.</li>
5
<li>“Restrictive” properties, such as min-width, are applied to items only after the stage when free space or negative space is redistributed.</li>
6
</ul><p>And these subtleties can lead to unexpected effects if the items overflow outside of the flex container. Let’s experiment.</p>
6
</ul><p>And these subtleties can lead to unexpected effects if the items overflow outside of the flex container. Let’s experiment.</p>