Flexbox在锚内生长

Question

我遇到了一个问题，我希望一个锚定的弹药箱儿童能够获得所有可用的剩余高度。我认为添加flex-grow: 1就足够了，但它不起作用。锚内的div不会占据整个高度。

问题：有没有办法让它工作而不将我的普通锚转换为flexbox元素？

这是一个说明问题的codepen： https://codepen.io/alansouzati/pen/YVpYeO

我已经创建了3个图块，其中第一个图块有锚点来举例说明。您可以看到价格与其他兄弟姐妹不一致。

Answer 1

.plain不是flex父级，因此在flex-grow: 1上设置.service并不会做任何事情。

只需将display: flex添加到.plain

即可

＆＃13;

＆＃13;

.tiles {
  display: flex;
  flex-wrap: wrap;
  background-color: #d3d3d3;
  padding: 12px;
  justify-content: center;
}

.tile {
  display: flex;
  border: 1px solid #333;
  flex-basis: 200px;
  background-color:  white;
  margin: 12px;
  flex-direction: column;
}

.tile:hover {
  background-color:  #f1f1f1;
}

.service {
  display: flex;
  flex-direction: column;
  padding: 12px;
  flex-grow: 1;
}

.service-body {
  flex-grow: 1;
}

p {
  color: #a8a8a8;
}

.plain {
  margin: 0;
  color:inherit;
  text-decoration:none;
  flex-grow: 1;
  display: flex;
}

＆＃13;

<div class='tiles'>
  <div class='tile'>
    <a href="http://google.com" class='plain' target="_blank">
      <div class='service'>
        <h2>Service 1</h2>
        <div class='service-body'>
          <p>This is a sample service</p>
        </div>
        <span>$9.99</span>
      </div>
    </a>
  </div>
  <div class='tile'>
    <div class='service'>
      <h2>Service 2</h2>
      <div class='service-body'>
        <p>This is a sample service</p>
      </div>
      <span>$9.99</span>
    </div>
  </div>
  <div class='tile'>
    <div class='service'>
      <h2>Service 3</h2>
      <div class='service-body'>
        <p>This is a sample service with a long text that will make things render differently</p>
      </div>
      <span>$9.99</span>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

见下文。我在锚标记绝对和相对于主容器之后创建了“.service”。希望它有所帮助

.tiles {
  display: flex;
  flex-wrap: wrap;
  background-color: #d3d3d3;
  padding: 12px;
  justify-content: center;
}

.tile {
  display: flex;
  border: 1px solid #333;
  flex-basis: 200px;
  background-color:  white;
  margin: 12px;
  flex-direction: column;
  position: relative;/**Added Code**/
}

.tile:hover {
  background-color:  #f1f1f1;
}

.service {
  display: flex;
  flex-direction: column;
  padding: 12px;
  flex-grow: 1;
}

.service-body {
  flex-grow: 1;
}

p {
  color: #a8a8a8;
}

.plain {
  margin: 0;
  color:inherit;
  text-decoration:none;
  flex-grow: 1;
}
/**Added Code**/
.plain > .service {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

<div class='tiles'>
  <div class='tile'>
    <a href="http://google.com" class='plain' target="_blank">
      <div class='service'>
        <h2>Service 1</h2>
        <div class='service-body'>
          <p>This is a sample service</p>
        </div>
        <span>$9.99</span>
      </div>
    </a>
  </div>
  <div class='tile'>
    <div class='service'>
      <h2>Service 2</h2>
      <div class='service-body'>
        <p>This is a sample service</p>
      </div>
      <span>$9.99</span>
    </div>
  </div>
  <div class='tile'>
    <div class='service'>
      <h2>Service 3</h2>
      <div class='service-body'>
        <p>This is a sample service with a long text that will make things render differently</p>
      </div>
      <span>$9.99</span>
    </div>
  </div>
</div>