css - 具有明确定义尺寸的 Div 是否会随视口(viewport)宽度缩放尺寸？

Question

我在一个容器中有两个 div:一个包含图像，另一个包含文本。图像容器具有设置的尺寸 width: 250px; 和 height: 240px;，但是当屏幕(和包含的 div)足够窄时，图像容器开始除了另一个设置为 width: auto; 的 div 之外，还要减小尺寸。

我怀疑这是由于第二个内部 div 中的文本需要一定的空间，因此将图像容器向内“推”，但使用 word-break: break-word;没有解决问题。

风格:

/* "imagecontainer" and "credentials" are contained within "info-container" */

.subsection .info-container {
    display: flex;
}

.subsection .imagecontainer {
    width: 250px;
    height: 240px;
    margin: 0;
    padding: 0;
}

.subsection .imagecontainer img {
    width: 90%;
    height: 90%;
    margin-left: auto;
    margin-right: auto;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    margin-top: 5px;
}

.subsection .credentials {
    width: 600px;
    height: 230px;
    padding: 10px;
    padding-right: 20px;
    position: relative;
    border-right: 1px solid #333;
}

/* This problem occurs at pageWidth<920px, when this media query would be in effect: */

@media only screen and (max-width: 920px) {
    .subsection .credentials {
        width: auto;
        border-right: none;
    }
}

标记:

<div class="subsection">
  <div class="info-container">
    <div class="imagecontainer">
      <img src="data/users/images/5d7d03b1d0013.png">
    </div>
    <div class="credentials" style="width: auto;">
      <div class="name">Test User</div>
      <div class="location">Albany, New York</div>
    </div>
  </div>
  <div class="actions">
    <div class="actions-container">
      <div class="action">
        <a class="btn btn-primary" href="viewprofile?id=5d7d03b1d0013">View profile</a>
      </div>
      <div class="action">
        <a class="btn btn-primary" href="connect?id=5d7d03b1d0013">Make Connection</a>
      </div>
    </div>
  </div>
</div>

预期:只有包含文本的 div 会根据视口(viewport)宽度的变化调整其宽度。

实际:包含图像的 div 和包含文本的 div 的大小都减小了。

编辑: 添加标记

Answer 1

该图像容器的父容器具有 display: flex;。如果您不为子元素定义任何内容，它们将被允许收缩。

为避免这种情况，您可以将 flex-shrink: 0(意味着它不能变得更小)添加到 .subsection .imagecontainer .