Question

在我的网络应用中，我有一个背景和一个叠加层，可以增长，如果其中一个增长，另一个应增长到相同的大小。换句话说：我有一堆HTML元素，它们的大小应该是同步的，遵循最大的元素。

有没有办法用普通的flex布局来做到这一点？（没有 float和transform黑客攻击）

这里有一些伪代码来概述我的问题：

<container>
   <background>has min-height of container height. Can grow (and cause scrollbars) if dynamic content takes more height</background>
   <foreground>some overlay that should cover the background completely (following the size of the 'background' element, not the size of the 'container' element.)</foreground>
</container>

Answer 1

我提出了以下解决方案：

对弹性容器的每个100%大小使用弹性项目
为每个项目（第一项除外）设置margin-left为-100%。

/* 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;
}

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

如何使用CSS flexbox调整背景和前景图层的大小

1 个答案: