<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;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.