In this scenario, the crucial factor to consider is the initial width of the elements. To better grasp this concept, let's explore a simplified example:
.box {
display: flex;
width: 50%;
border: 2px solid red;
margin: auto;
}
.box>div {
border: 1px solid green;
}
<div class="box">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla nisi, accumsan vel purus nec, pretium dictum ex. Suspendisse pellentesque velit eget turpis porttitor efficitur
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla nisi, accumsan vel purus nec, pretium dictum ex. Suspendisse pellentesque velit eget turpis porttitor efficitur
</div>
</div>
<div class="box">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla nisi, accumsan vel purus nec, pretium dictum ex. Suspendisse pellentesque velit eget turpis porttitor efficitur
</div>
<div style="width:100%;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla nisi, accumsan vel purus nec, pretium dictum ex. Suspendisse pellentesque velit eget turpis porttitor efficitur
</div>
</div>
It becomes evident that in the second case, one element appears smaller due to reduced width, which makes sense.
Note that both elements contain the same content and necessitate wrapping within each due to limited space available.
If we decrease the content length, the outcome changes:
.box {
display: flex;
width: 50%;
border: 2px solid red;
margin: auto;
}
.box>div {
border: 1px solid green;
}
<div class="box">
<div>
Lorem ipsum dolor sit amet,
</div>
<div>
Lorem ipsum dolor sit amet,
</div>
</div>
<div class="box">
<div>
Lorem ipsum dolor sit amet,
</div>
<div style="width:100%;">
Lorem ipsum dolor sit amet,
</div>
</div>
To comprehend both scenarios, understanding the flexbox algorithm summarized in three points is essential:
- The initial width setting for each element
- If total width exceeds container width, both elements shrink
- Shrink factor calculation involves negative free space (total width - container width) and individual element widths
The key lies in point (1).
Omitting width:100% yields these results for (1)
$('.box div').each(function() {
console.log($(this).width());
})
.box {
display: flex;
width: 50%;
border: 2px solid red;
margin: auto;
}
.box>div {
border: 1px solid green;
flex-shrink:0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...
</div>
</div>
...
For expanding an element's width, adjusting the first element to shrink more can be a viable solution:
body {
font-size: 1.3rem;
}
h1 {
margin-top: 0;
}
.container {
width: 80%;
max-width: 1100px;
margin: 0 auto;
}
.row {
display: flex;
}
.primary-content {
background-color: moccasin;
}
.sidebar {
padding: 1em;
text-align: center;
color: #fff;
background-color: #136c72;
}
<main class="main container row">
<section class="primary-content">
<h2>Quality designs made custom, on demand, just for you</h2>
<p>Lorem ipsum dolor sit amet, ...</p>
</section>
<aside class="sidebar">
<h2>Cheap</h2>
<p>Lorem ipsum dolor sit amet, ...</p>
</aside>
</main>
<main class="main container row">
<section class="primary-content" style="flex-shrink:1.2;">
<h2>Quality designs made custom, on demand, just for you</h2>
<p>Lorem ipsum dolor sit amet, ...</p>
</section>
<aside class="sidebar">
<h2>Cheap</h2>
<p>Lorem ipsum dolor sit amet, ...</p>
</aside>
</main>
Alternatively, setting flex-shrink values for both elements, with a higher value for the first one, can achieve desired width adjustment: