将flex元素的子元素设置为父元素的高度？

Question

JSFiddle

我希望左侧为a，右侧为b。中间是水平对齐的列表。我希望full-height div成为父级的高度。

所以：

a            1 2 3             b

这是HTML：

<div class="container">
  <div class="a">
    a
  </div>

  <div class="full-height">
      <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
     </ul>
  </div>

  <div>
      b
  </div>
</div>

我看过其他有两个解决方案的SO帖子：

• 将flex-direction: column;添加到父级。由于父母需要横向布置，因此在这种情况下不会工作。
• 设置父级高度并生成子级height: 100%。我需要父母的身高是动态的。

有什么想法吗？

Answer 1

您需要在align-self:stretch;元素上使用.full-height。

为了对齐我添加的列表中的元素：

 align-items: center;
 display: flex;
 justify-content: center;

到.full-height和a，也删除了ul的填充。

更新1：

更新以满足评论。将展示内容移至ul而不是.full-height，并将高度100％添加到ul。

您可以在this article中了解有关flex如何工作的更多信息。

.container{
  display: flex;
  position: static;
  width: 100%;
  background: gold;
  align-items: center;
  justify-content: space-between;
}
.a{
  height: 300px;
     align-items: center;
    display: flex;
    justify-content: center;
}
ul{
  list-style-type: none;
}
li{
  display: inline-block;
}
.full-height{
  background: tomato;
  align-self: stretch;
}

ul{
  height:100%;
  align-items: center;
  display: flex;
  justify-content: center;
  padding:0;
  margin:0;
}

<div class="container">
  <div class="a">
    a
  </div>
   <div class="full-height">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </div>
   <div>
    b
  </div>
  
</div>