Flexbox - How to prevent long text from shifting divs to the right?

Question

I've got a layout that I'm working on that uses a combination of CSS Grid and Flexbox. The grid is setting up the structure (left hero image and 4 rows of content on the right).

Within each content row, I've got a flexbox that handles placement of a thumbnail image on the right, and three lines of text on the left - date, title and author.

However, when any of the lines of text are too long, they start bumping up the thumbnail image, as in Row 2 here:

Obviously I want the thumbnail to stay fixed in place and the text to just wrap before they touch it. I've tried a whole bunch of potential strategies - use of overflows, floats instead of flexbox, but can't find the trick. Any ideas?

Here's the code, Row 3 and Row 4 omitted for brevity, and a Codepen link:

https://codepen.io/anon/pen/dBWyzb

.wrapper {
  width: 1200px;
  margin: 0 auto;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(2, minmax(100px, auto));
  grid-template-areas:
    "hero row1"
    "hero row2"
    "hero row3"
    "hero row4";
  grid-gap: 10px;
}

.hero {grid-area: hero;}
.row1 {grid-area: row1;}
.row2 {grid-area: row2;}

.flex {
  display: flex;
  background-color: lightblue;
  align-items: center;
}

.thumbnail {
  width: 100px;
  height: 100px;
  margin-left: auto;
}

img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

<div class="wrapper">
  <div class="grid">
    
    <div class="hero">
      <img src="https://dummyimage.com/600x400/000/fff"/>
    </div>
    
    <!-- Row 1 -->
    <div class="row1">
      <div class="flex">
        
        <div class="text">
          <div class="date">12 JULY 2019</div>
          <h3>Title</h3>
          <div class="author">Author Name</div>
        </div>
        
        <div class="thumbnail">
          <img src="https://dummyimage.com/600x400/000/fff"></img>
        </div>
      
      </div> <!-- end flex -->
    </div> <!-- end row -->
    
    <!-- Row 2 -->
    <div class="row2">
      <div class="flex">
        
        <div class="text">
          <div class="date">12 JULY 2019</div>
          <h3>A really long title seems to be shifting the right-hand image up, which is not ideal! Any ideas, internet? ------> </h3>
          <div class="author">Author Name</div>
        </div>
        
        <div class="thumbnail">
          <img src="https://dummyimage.com/600x400/000/fff"></img>
        </div>
      
      </div> <!-- end flex -->
    </div> <!-- end row -->


  </div>
</div>

flex-shrink:0 to the image – Temani Afif Jun 22 '19 at 19:16 — Temani Afif, Jun 22 '19 at 19:16

Ori Drori · Accepted Answer · 2019-06-22T19:30:22.153

Add flex: 1; to the .text div, so the flexbox can manage how much space it can take:

.wrapper {
  width: 1200px;
  margin: 0 auto;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(2, minmax(100px, auto));
  grid-template-areas: "hero row1" "hero row2" "hero row3" "hero row4";
  grid-gap: 10px;
}

.hero {
  grid-area: hero;
}

.row1 {
  grid-area: row1;
}

.row2 {
  grid-area: row2;
}

.flex {
  display: flex;
  background-color: lightblue;
  align-items: center;
}

.text {
  flex: 1;
}

.thumbnail {
  width: 100px;
  height: 100px;
  margin-left: auto;
}

img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

<div class="wrapper">
  <div class="grid">

    <div class="hero">
      <img src="https://dummyimage.com/600x400/000/fff" />
    </div>

    <!-- Row 1 -->
    <div class="row1">
      <div class="flex">

        <div class="text">
          <div class="date">12 JULY 2019</div>
          <h3>Title</h3>
          <div class="author">Author Name</div>
        </div>

        <div class="thumbnail">
          <img src="https://dummyimage.com/600x400/000/fff"></img>
        </div>

      </div>
      <!-- end flex -->
    </div>
    <!-- end row -->

    <!-- Row 2 -->
    <div class="row2">
      <div class="flex">

        <div class="text">
          <div class="date">12 JULY 2019</div>
          <h3>A really long title seems to be shifting the right-hand image up, which is not ideal! Any ideas, internet? ------> </h3>
          <div class="author">Author Name</div>
        </div>

        <div class="thumbnail">
          <img src="https://dummyimage.com/600x400/000/fff"></img>
        </div>

      </div>
      <!-- end flex -->
    </div>
    <!-- end row -->


  </div>
</div>

This works by shifting the text element from `flex-basis: auto` to `flex-basis: 0`. With `flex-basis: auto` the text element prioritizes its own space, pushing the thumbnail aside. With `flex-basis: 0`, the text element considers all space on the row, shrinking to accommodate the thumbnail space. — Michael Benjamin, Jun 22 '19 at 19:24

score 0 · Answer 2 · answered Jun 22 '19 at 19:15

0

The default setting on flex items is flex-shrink: 1. This means the flex items are allowed to shrink in order to remain inside the container.

In your case, just disable flex-shrink. Add this to your code:

.thumbnail { flex-shrink: 0 }

answered Jun 22 '19 at 19:15

Michael Benjamin

346,931
104
581
701

Flexbox - How to prevent long text from shifting divs to the right?

2 Answers2