<p> Width is just a fallback when flex-basis is missing, and min-width and max-width are just upper and lower limits for the final flex-basis.</p>
<div class="container">
<div class="one">Item 1</div>
<div class="two">Item 2</div>
<div class="three">Item 4</div>
<div class="four">item 4</div>
</div>
<article>
<h2>Learnings</h2>
<ol>
<li>Having <code>flex-basis</code> will ignore any width propery specified to the box.</h1>
<li>If no flex-basis is specified, then the flex-basis falls back to the item's width property.</li>
<li>If no width is specified, then the flex-basis falls back to the computed width of the item's contents.</li>
<li>Providing max-width or min-width would be respected and would be taken into consideration</li>
</ol>
</article>
.container {
display: flex;
width: 1000px;
background-color: lightyellow;
border: 2px solid;
}
.container > div {
flex-basis: 250px;
width: 300px; /* this will not be respected. Try changing it min-width */
height: 200px;
border: 5px solid hsla(0, 0%, 100%, .5)
}
.one {
background-color: green;
}
.two {
background-color: red;
}
.three {
background-color: blue;
}
.four {
background-color: grey;
}
/* for asthetic reasons only */
html {
font-size: 125%;
font-family: Tahoma;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.