如何根据另一个孩子的存在来定位这个flexbox孩子？

Question

我快速跟进我之前发布的问题here。

我正在尝试定位一个flexbox子元素，具体取决于是否存在另一个孩子。

最佳可视化codepen

在某些面板中，不会加载ICON3。容器收到hidden类，我可以选择使用display或opacity等隐藏它。

我希望ICON4保持在右侧，并且与ICON2保持一致，并使包装器相应地调整大小。但我似乎无法让它发挥作用。

我尝试了什么：

opacity: 0 - 这会使ICON4保持在右侧，但不会调整包装器的大小，因为ICON3仍然存在并占用空间。

display: none - 这只会将ICON4移动到ICON3时。

还尝试使用.hidden + .four进行样式组合，但我找不到可行的解决方案。

非常感谢任何帮助！

以下代码段：

* {
  font-family: sans-serif;
}
.wrapper {
  display: flex;
  align-items: flex-start;
  width: 500px;
  background-color: #F9F9F9;
  padding: 10px;
  position: relative;
  margin-bottom: 2em;
}
.image {
  width: 150px;
  margin-right: 1em;
}
.row {
  display: flex;
  flex-direction: column;
  flex: 1 0 0;
}
.more {
  font-weight: bold;
  margin-top: 1em;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 4em;
  justify-content: space-around;
}
.hidden {
  opacity: 0;
  /*display: none;  // this pushes ICON4 underneath */
}
.hidden + .four {
  /*margin-bottom: 1.4em; // this seems to position .four correctly, but doesn't alter height of .wrapper */
}
.four {
  margin-top: auto;
}
.ideal {
  position: absolute;
  bottom: 20px;
  right: -44px;
}
.ideal span {
  color: green;
  font-weight: bold;
  opacity: .2;
  margin-right: 4em
}
.ideal {
  position: absolute;
  bottom: 32px;
  right: -201px;
}
.ideal span {
  color: green;
  font-weight: bold;
  opacity: .2;
  margin-right: 4em
}

<div class="wrapper">
  <div class="image">
    <img src="http://placehold.it/150x68" alt="" />
  </div>
  <div class="row">
    <span>Text content</span>
    <span>Text content</span>
    <span>Text content</span>
    <div class="more">
      <span class="one">ICON1
      </span>
      <span class="two">ICON2</span>
      <span class="three hidden">ICON3</span>
      <span class="four">ICON4</span>
    </div>
  </div>
  <div class="ideal"><span>ICON4</span>&lt; ideal position and wrapper to resize</div>
</div>

Answer 1

我忽略了.more

的身高规则

我不认为我用css更改了这个，因为它是父母，但是使用javascript我可以将一个类添加到.more并覆盖高度。