根据兄弟姐妹的身高让灵儿变长

Question

我有两个文章摘要包含在同一个父级中，如果另一篇文章的内容较长，我需要一个子元素（带有背景图像的元素）来拉伸。

我想如果我从父母那里走下来确保一切都设置为显示flex，然后在我的孩子设置flex grow属性一切都会成功，但不是增加内容的高度来匹配它＆ ＃s;兄弟姐妹，它推出了该区域的宽度（不可接受）。

请看一下我的小提琴（看起来只是它的＃34;工作＆＃34;在Chrome中），如果您有任何帮助，请告诉我。

Fiddle

＆＃13;

＆＃13;

 article {
   float: left;
   width: 50%;
   padding-right: 0.75em;
   display: flex;
   flex-direction: column;
 }
 .article-type-wrapper {
   display: block;
   background-color: #999999;
   color: white;
   padding-top: 15px;
   padding-bottom: 15px;
   height: 60px;
 }
 header {
   display: flex;
   padding: 0 1.5em 20px 1.5em;
   background: url(//i.istockimg.com/file_thumbview_approve/83599047/6/stock-photo-83599047-sun-orange-yellow-and-rays-background.jpg);
   background-size: cover;
 }
 h3 {
   flex: 1 0 auto;
   margin: 0;
   padding-top: 60px;
   padding-bottom: 60px;
   padding-left: 25px;
   font-weight: lighter;
   color: black;
 }
 * {
   box-sizing: border-box;
 }
 .flex-wrapper {
   display: flex;
   flex-direction: row;
 }

＆＃13;

<div class="flex-wrapper">

  <article>

    <div class="article-type-wrapper">
      <div class="article-types">
        <span class="article-type">Image Gallery</span>
      </div>
    </div>

    <a href="#">
      <header class="article-header">
        <h3>Article title in background area, longer title that wraps and makes this one longer </h3>
      </header>
    </a>

  </article>

  <article>

    <div class="article-type-wrapper">
      <div class="article-types">
        <span class="article-type">Image Gallery</span>
      </div>
    </div>

    <a href="#">
      <header class="article-header">
        <h3>Short title</h3>
      </header>
    </a>

  </article>

</div>

＆＃13;

＆＃13;

＆＃13;

P.S。 JavaScript不是这个问题的可接受的解决方案。

Answer 1

您可以尝试使用嵌套的flexbox布局。请参阅下面的演示和评论。

<强> jsFiddle

article {
  /* float: left; */
  width: 50%;
  padding-right: 0.75em;
  display: flex;
  flex-direction: column;
}

article > a {
  flex: 1; /* added */
  display: flex; /* added */
}

.article-type-wrapper {
  display: block;
  background-color: #999999;
  color: white;
  padding-top: 15px;
  padding-bottom: 15px;
  height: 60px;
}

header {
  /* display: flex; */
  padding: 0 1.5em 20px 1.5em;
  background: url(//i.istockimg.com/file_thumbview_approve/83599047/6/stock-photo-83599047-sun-orange-yellow-and-rays-background.jpg);
  background-size: cover;
  width: 100%; /* added */
  box-sizing: border-box; /* added */
}

h3 {
  flex: 1 0 auto;
  margin: 0;
  padding-top: 60px;
  padding-bottom: 60px;
  padding-left: 25px;
  font-weight: lighter;
  color: black;
}

* {
  box-sizing: border-box;
}

.flex-wrapper {
  display: flex;
  flex-direction: row;
}

<div class="flex-wrapper">

  <article>

    <div class="article-type-wrapper">
      <div class="article-types">
        <span class="article-type">Image Gallery</span>
      </div>
    </div>

    <a href="#">
      <header class="article-header">
        <h3>Article title in background area, longer title that wraps and makes this one longer </h3>
      </header>
    </a>

  </article>

  <article>

    <div class="article-type-wrapper">
      <div class="article-types">
        <span class="article-type">Image Gallery</span>
      </div>
    </div>

    <a href="#">
      <header class="article-header">
        <h3>Short title</h3>
      </header>
    </a>

  </article>

</div>