如何在弹性容器中显示2个项目，并保持弹性项目的设置宽度和高度？

Question

**我在div内添加了填充，以便您可以看到方框

我需要在桌面屏幕尺寸上并排显示这2个项目。 我将包含2个元素的紫色边框设置为显示flex。 圆div缩小。 我已将高度设置为：200px宽度：200px-在设置父级以显示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 compression。

Answer 1

我为包含圆圈的弹性项目添加了设置。默认情况下，flex-shrink的设置为1，可以根据需要缩小它。将其设置为零可确保按需要显示圆圈。

Deseq2

* {
  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;
}