html - CSS - div 扩展高度以匹配同级

Question

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

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

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

期望的结果:

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;
}

<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>

Answer 1

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 */
}

<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>

注意事项:

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