-1

This feels like a really really simple problem, but I'm struggling here.

I have looked at a number of other questions (eg: Child divs next to each other with auto height, How do I keep two side-by-side divs the same height?), and haven't found a solution.

I have two divs, in a wrapping div, displayed side by side. The height of one is determined by text content of indeterminate length, and the height of the other (which just has a background image) should match.

My thinking was something like this:

    .wrapper {
      display: flex;
      flex-direction: row;
      border: 1px solid black;
    }
    
    .image {
      background-image: url(https://source.unsplash.com/random/600x600);
      height: 100%; /* Shows up w no height! */
      width: 300px;
      border: 1px solid yellow;
      /* Needed to make the image show */
      /* height: 200px; */
    }
    
    .content {
      width: 100%;
      padding: 20px; /* Height is sum of text height and padding */
      border: 1px solid blue;
    }
   <div class="wrapper">
      <div class="image">
      </div>
      <div class="content">
        <p>This could go on and on and on, and should determine the height of the set of divs, sitting next to each other. I do NOT want to program a set height, because that could clip long text.</p>
      </div>
    </div>
Sasha
  • 6,224
  • 10
  • 55
  • 102
  • Does the height need to match dynamically or you can set a fixed height and then scroll on text? – T.kowshik Yedida Feb 11 '21 at 19:02
  • The former. Scrolling won't work, though if this is undoable (!?), then I'd probably constrain text length or resize text programmatically. – Sasha Feb 11 '21 at 19:48

1 Answers1

1

According to this you should remove your height property and set align-items:stretch on your wrapper (but it happens to be the default, so just remove the height and it will work).

.wrapper {
      display: flex;
      flex-direction: row;
      border: 1px solid black;
      align-items: stretch;
    }
    
    .image {
      background-image: url(https://source.unsplash.com/random/600x600);
      width: 300px;
      border: 1px solid yellow;
      /* Needed to make the image show */
      /* height: 200px; */
    }
    
    .content {
      width: 100%;
      padding: 20px; /* Height is sum of text height and padding */
      border: 1px solid blue;
    }
<div class="wrapper">
      <div class="image">
      </div>
      <div class="content">
        <p>This could go on and on and on, and should determine the height of the set of divs, sitting next to each other. I do NOT want to program a set height, because that could clip long text.</p>
      </div>
    </div>

I had no idea of this behaviour, I'll quote the comment in that question that was the most helpful.

Yep, Chrome has some issues, especially with nested flexboxes. For example I've got a nested flex box with children that have height:100% but they are rendering with natural height instead. And the weird thing is if I change their height to auto, then they render as height:100% like I was trying to do. It is definitely not intuitive if that's how it should work. – trusktr

Gunther
  • 1,297
  • 9
  • 15
  • How weird. Would never occur to me to remove the height value rather than set it to 100% or auto. – Sasha Feb 11 '21 at 19:51