.flex-container {
  display: flex;
  width: 700px;
  border: 2px solid #5cb85c; /* Success green */
  padding: 15px;
  background-color: #f0fff0;
  font-family: sans-serif;
}

.flex-item {
  background-color: #d9edf7; /* Info blue */
  border: 1px solid #31708f;
  border-radius: 5px;
  padding: 15px;
  margin: 8px;
  text-align: center;
  color: #31708f;
}

/* Item 1: Grows twice as fast as other growing items, shrinks normally, starts from 100px */
.flex-item-1 {
  flex: 2 1 100px; /* flex-grow: 2, flex-shrink: 1, flex-basis: 100px */
  background-color: #ffe0b2; /* Orange light */
  color: #e65100;
}

/* Item 2: Grows normally, shrinks normally, starts from 150px */
.flex-item-2 {
  flex: 1 1 150px; /* flex-grow: 1, flex-shrink: 1, flex-basis: 150px */
  background-color: #c8e6c9; /* Green light */
  color: #2e7d32;
}

/* Item 3: Does not grow or shrink, maintains its content width */
.flex-item-3 {
  flex: 0 0 auto; /* flex-grow: 0, flex-shrink: 0, flex-basis: auto (content width) */
  background-color: #cfd8dc; /* Blue Grey */
  color: #455a64;
}

/* Item 4: Shorthand for flex-grow: 1, flex-shrink: 1, flex-basis: 0%. Fills remaining space. */
.flex-item-4 {
  flex: 1; 
  background-color: #bbdefb; /* Light Blue */
  color: #1976d2;
}

/* Example HTML structure:
<div class="flex-container">
  <div class="flex-item flex-item-1">Item 1 (flex: 2 1 100px)</div>
  <div class="flex-item flex-item-2">Item 2 (flex: 1 1 150px)</div>
  <div class="flex-item flex-item-3">Item 3 (flex: 0 0 auto)</div>
  <div class="flex-item flex-item-4">Item 4 (flex: 1)</div>
</div>
*/