Flexbox - Как предотвратить сдвиг div вправо в длинном тексте?

У меня есть макет, над которым я работаю, который использует комбинацию CSS Grid и Flexbox. Сетка настраивает структуру (левое главное изображение и 4 строки контента справа).

В каждой строке контента у меня есть flexbox, который управляет размещением миниатюры справа и тремя строками текста слева — дата, название и автор.

Однако, когда какая-либо из строк текста слишком длинная, они начинают увеличивать миниатюру изображения, как в строке 2 здесь:

Очевидно, я хочу, чтобы миниатюра оставалась фиксированной на месте, а текст просто переносился, прежде чем они коснутся его. Я перепробовал целую кучу потенциальных стратегий — использование переполнения, поплавков вместо flexbox, но не могу найти подвох. Есть идеи?

Вот код, строки 3 и строки 4 для краткости опущены, а также ссылка на Codepen:

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 к изображению

— 22.06.2019 21:16

html css flexbox css-grid

22.06.2019 20:55

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

253

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Добавьте flex: 1; в div .text, чтобы flexbox мог управлять тем, сколько места он может занимать:

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

Это работает путем смещения текстового элемента с flex-basis: auto на flex-basis: 0. С flex-basis: auto текстовый элемент отдает приоритет своему собственному пространству, отодвигая миниатюру в сторону. С flex-basis: 0 текстовый элемент учитывает все пространство в строке, сжимаясь, чтобы вместить пространство миниатюры.

— 22.06.2019 21:24

22.06.2019 20:58

Значение по умолчанию для гибких элементов — flex-shrink: 1. Это означает, что гибким элементам разрешено сжиматься, чтобы оставаться внутри контейнера.

В вашем случае просто отключите flex-shrink. Добавьте это в свой код: