CSS - div extend height to match sibling

Question

The code below gives this result:

Which is very close to the result I want except three facts:

Why is there a very odd grey area at the bottom of the picture?
How can I make the orange div extend to the bottom of the picture? I tried height: 100% but it didn't work...
How can I also give a 10 pixels space between the div of the text and the picture?

Desired result:

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>

Assume your desired result as table. You can create same using div's with display:table and two display:table-cell. — divy3993, Mar 09 '17 at 17:09
The thing here is that the `parent div` the yellow part does not have a fixed height which kinda not allow the child to expand unless you give it the height of the image — Oke Tega, Mar 09 '17 at 17:26

score 1 · Answer 1 · answered Mar 09 '17 at 17:13

1

Surely img's margin-bottom, set it to 0.
Flexbox surely is your friend here.
Same as 1, but with margin-left in img and margin-right in .div2, both of 5.

answered Mar 09 '17 at 17:13

RompePC

815
1
8
17

score 1 · Accepted Answer · edited May 23 '17 at 11:46

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>

Notes:

Establish flex container. By default, children will line-up in a row (flex-direction: row) with equal height (align-items: stretch).
Make image appear last in visual display (default order value for all flex items is 0)
Make orange box consume all available space in the row.
Remove defined heights on flex items. They will override align-items equal height feature.
Mystery white space underneath image tag

CSS - div extend height to match sibling

2 Answers2

Linked