Flexbox: Distributing Remaining Space Unevenly

.container {
  display: flex;
  width: 100%;
  height: 200px;
  border: 1px solid #ccc;
}

.sidebar {
  flex-grow: 1; /* Takes 1 part of remaining space */
  background-color: #f0f0f0;
  padding: 10px;
}

.main-content {
  flex-grow: 3; /* Takes 3 parts of remaining space */
  background-color: #e0e0e0;
  padding: 10px;
}

How it works: This snippet demonstrates how to distribute available space unevenly among flex items using the `flex-grow` property. The `container` is set to `display: flex`. Items inside it, like `.sidebar` and `.main-content`, are assigned `flex-grow` values. For instance, `flex-grow: 1` means the sidebar takes one proportion of the remaining space, while `flex-grow: 3` makes the main content take three proportions, resulting in a 1:3 ratio for the distributed space after initial content sizing.