将div放在flex-box的底部，没有绝对位置

Question

我遇到一些html / css问题。

https://jsfiddle.net/n3go4u7y/3/

.row {
display: flex;
display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox;      /* TWEENER - IE 10 */
display: -webkit-flex;     /* NEW - Chrome */
display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
margin-bottom: 20px;
}
.product {
background: green;
border: 1px black solid;
padding: 20px;
margin-right: 20px;
}
.product_name {
background: purple;
}
.product_data {
background: yellow;
}
.basket_add {
background: red;
margin-top: 20px;
}

<div class="row">
  <div class="product">
    <div class="product_data">
      <div class="product_name">aaa</div>
      <div class="product_options">
        <div class="product_option">aaa_1</div>
        <div class="product_option">aaa_2</div>
      </div>
    </div>
    <!-- product_data -->
    <div class="basket_add">Add</div>
  </div>
  <!-- product -->
  
  <div class="product">
    <div class="product_data">
      <div class="product_name">bbb</div>
      <div class="product_options">
        <div class="product_option">bbb_1</div>
        <div class="product_option">bbb_2</div>
        <div class="product_option">bbb_3</div>
      </div>
    </div>
    <!-- product_data -->
    <div class="basket_add">Add</div>
  </div>
  <!-- product --> 
</div>
<!-- row -->

我有一个产品列表，我希望它们总是连续显示。 所有产品都放在product-div中，这个div使用边框。 这些产品有一些固定的属性，比如name / desc和一些动态属性。

在product-div的底部，我想添加一个按钮（添加到购物篮）。

要在同一个高度上将所有product-div放在一行中，我使用的是felx-box。

现在我的问题是，我无法让“添加”按钮显示在一行中每个产品的相同高度。

我不能使用绝对位置，因为product_options必须拉伸product-div。

有关如何使其正常工作的任何提示？我尝试了几个小时，但是无法正常工作......如果真的有必要，我甚至可以使用javascript（jquery）。

非常感谢

Answer 1

嵌套的flexboxes

将“product”元素设为flexbox列：

.product {
  display: flex;
  flex-direction: column;
}

并给“底部”div一个margin-top auto

.basket_add {
  margin-top: auto;
}

.row {
  display: flex;
  display: -webkit-box;
  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;
  /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;
  /* TWEENER - IE 10 */
  display: -webkit-flex;
  /* NEW - Chrome */
  display: flex;
  /* NEW, Spec - Opera 12.1, Firefox 20+ */
  margin-bottom: 20px;
}
.product {
  background: green;
  border: 1px black solid;
  padding: 20px;
  margin-right: 20px;
  display: flex;
  flex-direction: column;
}
.product_name {
  background: purple;
}
.product_data {
  background: yellow;
}
.basket_add {
  background: red;
  margin-top: auto;
}

<div class="row">
  <div class="product">
    <div class="product_data">
      <div class="product_name">aaa</div>
      <div class="product_options">
        <div class="product_option">aaa_1</div>
        <div class="product_option">aaa_2</div>
      </div>
    </div>
    <!-- product_data -->
    <div class="basket_add">Add</div>
  </div>
  <!-- product -->

  <div class="product">
    <div class="product_data">
      <div class="product_name">bbb</div>
      <div class="product_options">
        <div class="product_option">bbb_1</div>
        <div class="product_option">bbb_2</div>
        <div class="product_option">bbb_3</div>
      </div>
    </div>
    <!-- product_data -->
    <div class="basket_add">Add</div>
  </div>
  <!-- product -->
</div>
<!-- row -->

<div class="row">
  <div class="product">
    <div class="product_data">
      <div class="product_name">ccc</div>
      <div class="product_options">
        <div class="product_option">ccc_1</div>
        <div class="product_option">ccc_2</div>
        <div class="product_option">ccc_3</div>
      </div>
    </div>
    <!-- product_data -->
    <div class="basket_add">Add</div>
  </div>
  <!-- product -->

  <div class="product">
    <div class="product_data">
      <div class="product_name">ddd</div>
      <div class="product_options">
        <div class="product_option">ddd_1</div>
        <div class="product_option">ddd_2</div>
      </div>
    </div>
    <!-- product_data -->
    <div class="basket_add">Add</div>
  </div>
  <!-- product -->
</div>
<!-- row -->