CSS - div扩展高度以匹配兄弟

Question

下面的代码给出了这个结果：

除了三个事实外，这与我想要的结果非常接近：

1. 为什么图片底部有一个非常奇怪的灰色区域？
2. 如何让橙色div延伸到图片的底部？我试过height: 100%，但它没有工作......
3. 我怎样才能在文本div和图片之间留出10个像素的空间？

期望的结果：



＆＃13;
＆＃13;
div.div1 {
  background-color: yellow;
  border: 1px solid black;
  padding: 10px;
  overflow: auto;
}

div.div2 {
  border: 1px solid gray;
  float: right;
}

div.div3 {
  background-color: orange;
  border: 1px solid gray;
  height: 100%;
  padding: 10px;
}
＆＃13;
<div class="div1">
  <div class="div2">
    <img src="http://splendidwillow.com/wp-content/uploads/2012/04/Allium-Purple-garlic-flowers-200x200.jpg">
  </div>
  <div class="div3">
    Text about flowers
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

Answer 1

1. 当然img的{​​{1}}，将其设置为0。
2. Flexbox肯定是你的朋友。
3. 与 1 相同，但margin-bottom中的margin-left和img中的margin-right都是5。

Answer 2

＆＃13;

＆＃13;

div.div1 {
  display: flex;            /* 1 */
  padding: 10px;
  overflow: auto;
  background-color: yellow;
  border: 1px solid black;
}

div.div2 {
  order: 1;                 /* 2 */
  border: 1px solid gray;
}

div.div3 {
  flex: 1;                  /* 3 */
  margin-right: 10px;
  padding: 10px;
  /* height: 100%  */       /* 4 */
  background-color: orange;
  border: 1px solid gray;
}

img {
  vertical-align: bottom;   /* 5 */
}

＆＃13;

<div class="div1">
  <div class="div2">
    <img src="http://splendidwillow.com/wp-content/uploads/2012/04/Allium-Purple-garlic-flowers-200x200.jpg">
  </div>
  <div class="div3">
    Text about flowers
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

注意：

1. 建立弹性容器。默认情况下，子项将排成一行（flex-direction: row），其高度相等（align-items: stretch）。
2. 使图像在可视显示中显示为最后一个（所有弹性项目的默认order值为0）
3. 使橙色框消耗行中的所有可用空间。
4. 删除弹性项目上定义的高度。它们将覆盖align-items相等高度功能。
5. Mystery white space underneath image tag