Implement a Sticky Footer Layout with Flexbox

html, body {
  height: 100%;
  margin: 0;
}

.flex-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Ensure container fills viewport height */
}

.main-content {
  flex-grow: 1; /* Allows content to take up remaining space */
  padding: 20px;
  background-color: #f8f8f8;
}

.footer {
  background-color: #333;
  color: white;
  padding: 15px;
  text-align: center;
}

How it works: This snippet creates a sticky footer. The `html` and `body` are set to `100%` height and zero margin. The main container uses `display: flex` and `flex-direction: column` to stack items vertically. `min-height: 100vh` ensures it fills the viewport. The `.main-content` then uses `flex-grow: 1` to expand and push the `.footer` to the bottom, effectively 'sticking' it below all other content.