在扩展子项以填充父项高度时，避免多余的flex/flex-grow

Question

有没有办法在容器的底部放置一个嵌套元素，而不需要手动将所有的嵌套包装器设置为flex/flex-grow？即，更少的CSS规则。

​

* {
  box-sizing: border-box;
}

.example {
  display: flex;
}
.example .body-B {
  margin-left: 1rem;
}

.body-B {
  display: flex;
}
.body-B .wrapper-1,
.body-B .wrapper-2 {
  display: flex;
  flex-grow: 2;
}
.body-B .wrapper-1 {
  flex-direction: column;
}
.body-B .actions {
  align-items: flex-end;
  display: flex;
  width: 100%;
  justify-content: space-evenly;
}

[class^=body] {
  border: 5px solid black;
  height: 500px;
  width: 23rem;
}
[class^=body] .title {
  border: 3px dotted grey;
  display: flex;
  justify-content: center;
}
[class^=body] .wrapper-1 {
  border: 3px solid green;
}
[class^=body] .wrapper-2 {
  border: 3px solid red;
}
[class^=body] .actions {
  border: 3px solid blue;
}

<div class="example">
  <div class="body-A">
    <div class="wrapper-1">
      <p class="title">Naturally positioned at top</p>
      <div class="wrapper-2">
        <div class="actions">
          <button class="action">click</button>
          <button class="action">click</button>      
        </div>
      </div>
    </div>
  </div>
  <div class="body-B">
    <div class="wrapper-1">
      <p class="title">Lots of<code>display: flex</code></p>
      <div class="wrapper-2">
        <div class="actions">
          <button class="action">click</button>
          <button class="action">click</button>      
        </div>
      </div>
    </div>
  </div>
</div>

​

是否有一个属性/模式允许将此基本功能应用于所有孩子？

Answer 1

尝试绝对定位。将以下代码添加到您的代码中：

[class^=body] {
  border: 5px solid black;
  height: 500px;
  width: 23rem;
  position: relative; /* new; set bounding box */
}

[class^=body] .wrapper-2 {
  border: 3px solid red;

  /* new */
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;

}
[class^=body] .actions {
  border: 3px solid blue;

  /* new */
  display: flex;
  justify-content: space-around;
}

​

* {
  box-sizing: border-box;
}

.example {
  display: flex;
}
.example .body-B {
  margin-left: 1rem;
}

.body-B {
  display: flex;
}
.body-B .wrapper-1,
.body-B .wrapper-2 {
  display: flex;
  flex-grow: 2;
}
.body-B .wrapper-1 {
  flex-direction: column;
}
.body-B .actions {
  align-items: flex-end;
  display: flex;
  width: 100%;
  justify-content: space-evenly;
}

[class^=body] {
  border: 5px solid black;
  height: 500px;
  width: 23rem;
  position: relative; /* new; set bounding box */
}
[class^=body] .title {
  border: 3px dotted grey;
  display: flex;
  justify-content: center;
}
[class^=body] .wrapper-1 {
  border: 3px solid green;
}
[class^=body] .wrapper-2 {
  border: 3px solid red;
  /* new */
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

[class^=body] .actions {
  border: 3px solid blue;
  /* new */
  display: flex;
  justify-content: space-around;
}

<div class="example">
  <div class="body-A">
    <div class="wrapper-1">
      <p class="title">Naturally positioned at top</p>
      <div class="wrapper-2">
        <div class="actions">
          <button class="action">click</button>
          <button class="action">click</button>      
        </div>
      </div>
    </div>
  </div>
  <div class="body-B">
    <div class="wrapper-1">
      <p class="title">Lots of<code>display: flex</code></p>
      <div class="wrapper-2">
        <div class="actions">
          <button class="action">click</button>
          <button class="action">click</button>      
        </div>
      </div>
    </div>
  </div>
</div>

​

jsFiddle demo

Answer 2

如果你想让你的元素保持在流中，你可以尝试以下方法：

[class^=body] .wrapper-1 {
  height:100%;
  display:flex;
  flex-direction:column;
}
[class^=body] .wrapper-2 {
  margin-top:auto; 
}
[class^=body] .actions {
  display: flex;
  justify-content: space-evenly;
}

完整代码：

​

* {
  box-sizing: border-box;
}
.example {
  display: flex;
}
.example .body-B {
  margin-left: 1rem;
}

[class^=body] {
  border: 5px solid black;
  height: 500px;
  position: relative;
  width: 23rem;
}
[class^=body] .title {
  border: 3px dotted grey;
  display: flex;
  justify-content: center;
}
[class^=body] .wrapper-1 {
  border: 3px solid green;
  height:100%;
  display:flex;
  flex-direction:column;
}
[class^=body] .wrapper-2 {
  border: 3px solid red;
  margin-top:auto;
}
[class^=body] .actions {
  border: 3px solid blue;
  display: flex;
  justify-content: space-evenly;
}

<div class="example">
  
  <div class="body-A">
    <div class="wrapper-1">
      <p class="title">Naturally positioned at top</p>
      <div class="wrapper-2">
        <div class="actions">
          <button class="action">click</button>
          <button class="action">click</button>      
        </div>
      </div>
    </div>
  </div>
  
  <div class="body-B">
    <div class="wrapper-1">
      <p class="title">Lots of<code>display: flex</code></p>
      <div class="wrapper-2">
        <div class="actions">
          <button class="action">click</button>
          <button class="action">click</button>      
        </div>
      </div>
    </div>
  </div>
</div>

​