/* HTML structure:
<div class="container">
  <div class="item item-grow">Item 1 (Grows)</div>
  <div class="item item-fixed">Item 2 (Fixed Width)</div>
  <div class="item item-shrink">Item 3 (Shrinks)</div>
</div>
*/

.container {
  display: flex;
  width: 100%; /* Or any defined width */
  border: 1px solid #ccc;
  padding: 10px;
}

.item {
  background-color: lightblue;
  border: 1px solid blue;
  padding: 10px;
  text-align: center;
  margin: 5px;
}

.item-grow {
  flex-grow: 1; /* Takes up available space */
  flex-basis: 0; /* Important for flex-grow to work as expected */
}

.item-fixed {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 200px; /* Fixed width, won't grow or shrink */
}

.item-shrink {
  flex-grow: 0;
  flex-shrink: 1; /* Allows shrinking below its content size if needed */
  flex-basis: 300px; /* Initial preferred size */
  min-width: 100px; /* Prevent shrinking too much */
}