Как я могу отобразить 2 элемента в гибком контейнере и сохранить заданные ширину и высоту гибкого элемента?

Question

* Я добавил отступы внутри элементов div, чтобы вы могли видеть поля

Мне нужно отобразить эти 2 элемента рядом сдруг друга на экранах рабочего стола.В пурпурной рамке с двумя элементами установлено отображение flex.Круг div поднимается вверх.Я установил в высоту: 200 пикселей в ширину: 200 пикселей - это хорошо, прежде чем я устанавливаю родительский элемент для отображения flex.Как я могу убедиться, что круг остается на заданной ширине и высоте, а остальное содержимое в красном поле изменяется, а не наоборот?Если бы вы могли также объяснить, как мне 5, почему это происходит, это было бы очень полезно.

.card__inner {
  display: flex;
}

.news__feature-image {
  border-radius: 100%;
  width: 200px;
  height: 200px;
  background: red;
}

<article class="card">
    <div class="card__inner">
            <div class="news__feature-image"></div>
            <div class="card__content">
            <header class="news__header">
                <span class="new__post-date">
                    18 Sep
                </span>
                <a class="card__link" href="/">
                    Read More
                </a>
            </header>
            <h2 class="news__title">Lorem ipsum title this is a title etc Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed turpis est, eleifend.</h2>
        </div>
    </div>
</article>

Я пытался использовать flex grow и flex shrink для изображения объекта и содержимого.

Answer 1

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

* {
  box-sizing: border-box;
}

.container {
  border: thin solid green;
  padding: 1rem;
}

.inner {
  border: thin solid purple;
  display: flex;
  padding: 1rem;
}

.circle {
  width: 200px;
  height: 200px;
  background-color: red;
  border-radius: 100%;
  flex-shrink: 0;
}

<div class="container">
  <div class="inner">
    <div class="circle"></div>
    <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
  </div>
</div>