How To Fit Sizes Of Background And Foreground Layer Using Css Flexbox

In my web app, I have a background and an overlay layer, both can grow, and if one of them grows, the other should grow to the same size. In other words: I have a stack of HTML ele

Solution 1:

I came up with the following solution:

• use flex items with each 100% size of the flex container,
• set margin-left to -100% for each of the items except for the first one.

/* demo setup */

* {
  margin: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  align-items: center;
  font-size: 16pt;
}

section {
  flex-basis: 0;
  border: 3px dashed blue;
}

.background {
  background-color: beige;
}

.overlay1 {
  background: linear-gradient(180deg, rgba(255, 0, 0, 0.5) 0%, rgba(255, 0, 0, 0) 100%);
  text-align: right;
}

.overlay2 {
  background: linear-gradient(90deg, rgba(0, 255, 0, 0.5) 0%, rgba(0, 255, 0, 0) 100%);
}

/* actual solution */.flex-stack {
  display: flex;
}

.flex-stack>* {
  flex-grow: 1;
  flex-basis: 0;
  margin-left: -100%;
}

.flex-stack> :first-child {
  margin-left: 0;
}

<sectionclass="flex-stack"><pclass="background"style="min-height:8em;">
    This is the background layer.
  </p><pclass="overlay1"><br> this is some overlay box.
  </p><pclass="overlay2"><br><br><textareastyle="resize: both;">This is resizable content: drag the lower left corner of the the textarea.
  </textarea><br> this is another overlay box.
  </p></section>