When dealing with a specific case like this, it's important to consider the default shrink effect defined by the flex-shrink property, which has a default value of 1. Initially, your element will overflow as shown below:
$('div').each(function() {
console.log($(this).width());
})
.container {
display: flex;
width: 600px;
}
.container div {
outline: 1px dotted black;
flex-shrink:0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga aspernatur suscipit aliquam beatae vitae harum, eius expedita quidem incidunt velit! 123456789</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga aspernatur suscipit aliquam beatae vitae harum, eius expedita quidem incidunt velit!</div>
</div>
Upon inspecting the elements, you will find the first element at 1011.3px and the second one at 935.3px, resulting in a total overflow of 1346.6px. This overflow will be adjusted on both elements to fit inside the flex container, considering that they may not shrink equally due to differing initial widths. The larger element will shrink more, leading to a factor of 1.08 and the final calculation:
x + y = 1346.6 where y = 1.08*x
Hence, x = 647px and y = 699.6px
This results in 311.7px for the first element and 288.3px for the second element after adjustment:
$('div').each(function() {
console.log($(this).width());
})
.container {
display: flex;
width: 600px;
}
.container div {
outline: 1px dotted black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga aspernatur suscipit aliquam beatae vitae harum, eius expedita quidem incidunt velit! 123456789</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga aspernatur suscipit aliquam beatae vitae harum, eius expedita quidem incidunt velit!</div>
</div>
The flex-shrink property determines how much a flex item will shrink relative to others in the flex container when negative free space is distributed. ref
It's essential to note that the flex shrink factor is multiplied by the flex base size when distributing negative space. This ensures proportional distribution based on each item's ability to shrink, preventing small items from shrinking to zero before larger ones are noticeably reduced. ref
Refer to the complete algorithm specification here:
https://www.w3.org/TR/css-flexbox-1/#resolve-flexible-lengths
Consider the min-width constraint that can impact final calculations since an element cannot shrink beyond its content size by default. Learn more about this constraint here.
The code snippet above includes some characters, altering the calculation due to a min-width constraint matching the length of the first sentence.
To see the original values and potential overflow, remove the constraint by adding min-width:0:
If uncertainties related to element sizes based on content arise, it's advisable to explicitly set flex-basis or width properties for full control over layout decisions.