Избегайте избыточных 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>