CodePen Embed - Flexbox: flex-basis: auto, content, 0…

Live

​x
 
<p>
  All boxes have <code>width: 200px !important</code>. As you can see, the <code>flex-basis</code> takes precedce over <code>width</code> and <code>height</code>.
</p>
​
<h2>0) no flex-basis</h2>
​
<div class="container container--0">  
  <p class="box">Lorem ipsum dolor.</p>
  <p class="box">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Possimus ipsa ipsam deserunt hic nam ratione. Excepturi similique quos dolorum corporis ab sed. </p>
  <p class="box"><img src="https://satyr.dev/600x250/58563a" alt="Satyr.io dummy image" width="600" height="250" /></p>  
</div>
​
<h2>1) flex-basis: auto</h2>
​
<div class="container container--1">  
  <p class="box">Lorem ipsum dolor.</p>
  <p class="box">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Possimus ipsa ipsam deserunt hic nam ratione. Excepturi similique quos dolorum corporis ab sed. </p>
  <p class="box"><img src="https://satyr.dev/600x250/58563a" alt="Satyr.io dummy image" width="600" height="250" /></p>  
</div>
​
<h2>2) flex-basis: content</h2>
​
<div class="container container--2">  
  <p class="box">Lorem ipsum dolor.</p>
  <p class="box">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Possimus ipsa ipsam deserunt hic nam ratione. Excepturi similique quos dolorum corporis ab sed. </p>
  <p class="box"><img src="https://satyr.dev/600x250/58563a" alt="Satyr.io dummy image" width="600" height="250" /></p>  
</div>
​
<h2>3) flex-basis: 0</h2>
​
<div class="container container--3">  
  <p class="box">Lorem ipsum dolor.</p>
  <p class="box">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Possimus ipsa ipsam deserunt hic nam ratione. Excepturi similique quos dolorum corporis ab sed. </p>
  <p class="box"><img src="https://satyr.dev/600x250/58563a" alt="Satyr.io dummy image" width="600" height="250" /></p>  
</div>
​
<h2>4) flex-basis: 300px</h2>
​
<div class="container container--4">  
  <p class="box">Lorem ipsum dolor.</p>
  <p class="box">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Possimus ipsa ipsam deserunt hic nam ratione. Excepturi similique quos dolorum corporis ab sed. </p>
  <p class="box"><img src="https://satyr.dev/600x250/58563a" alt="Satyr.io dummy image" width="600" height="250" /></p>  
</div>

Live

xxxxxxxxxx
 
.container {
  display: flex;
}
​
.box {
  padding: 1em;
  margin: 1em;
  width: 200px !important;
}
​
.container--0 .box {
}
​
.container--1 .box {
  flex-basis: auto;
}
​
.container--2 .box {
  flex-basis: content;
}
​
.container--3 .box {
  flex-basis: 0;
}
​
.container--4 .box {
  flex-basis: 300px;
}
​
​
​
/* etc. */
​
img {
  max-width: 100%;
  height: auto;
}
​
/* ETC (Formatting only): */
​
body {
  margin: 1.5em;
  font-size: 130%;
  font-family: sans-serif;
  background: #F2F0EC;
  color: #2E2C08;
}
​
.container {
  display: flex;  
  border: 10px solid #2E2C08;
  background: white;  
}
​
.box {
  margin: 0.25rem;
  padding: 0.5em;
  text-align: center;
  background: #abab9d;
}
​
fieldset {
  border: #abab9d 1px solid;
  padding: 0;
  margin-bottom: 2em; 
}
​
label {
  display: inline-block;
  padding: 0.5em;
  cursor: pointer;
}
​
.active {
  background: #abab9d;
}
​
.box--one {
  background: #abab9d;
}

This Pen is owned by Martin Michálek on CodePen.

See more by @machal on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.