使用指定高度的flexbox拉伸子元素以适合父元素

Question

http://jsfiddle.net/mnkfdcLz/4/

  .child1{
      padding: 10px;	flex: 1;

  }
  .parent {
    font-size: 20px;
      height: 50px;
      border: 1px solid rgba(0, 0, 0, 0.125);
    display: flex;
  }
  .child2 {
    flex: 0;
  }

<div class="parent">
  <div class="child1">
    {SUBJECT}
  </div>
  <span class="child2">
    <button class="but"><i class="fa fa-user fa-fw" ></i></button>
  </span>
</div>

这代表问题。我希望按钮在垂直和水平方向都可以拉伸。 谢谢

Answer 1

如果将元素设置为display:flex，它将自动将align-self:stretch分配给子元素。

.parent {
  font-size: 20px;
  height: 50px;
  border: 1px solid rgba(0, 0, 0, 0.125);
  display: flex;
}

.child1 {
  padding: 10px;
  flex: 1;
}

.child2 {
  flex: 0;
  display: flex; /* NEW */
}

<div class="parent">
  <div class="child1">{SUBJECT}</div>
  <span class="child2">
    <button class="but"><i class="fa fa-user fa-fw" ></i></button>
  </span>
</div>

Answer 2

将.child2设置为display:flex

.child1 {
  padding: 10px;
  flex: 1;
}

.parent {
  font-size: 20px;
  height: 50px;
  border: 1px solid rgba(0, 0, 0, 0.125);
  display: flex;
}

.child2 {
  flex: 0;
  display: flex;
}

<div class="parent">
  <div class="child1">
    {SUBJECT}
  </div>
  <span class="child2">
				<button class="but"><i class="fa fa-user fa-fw" ></i></button>
			</span>
</div>