Question

如您所见，柔性盒不会分成两部分，只是显示蓝色部分。如果您取消注释overflow: hidden它按预期工作。为什么呢？

.nav内容超出了宽度。

＆＃13;

.cont {
  width: 200px;
  height: 300px;
  background-color: red;
  display: flex;
}
.aside {
  width: 50px;
  height: 100%;
  background-color: green;
}
.nav {
  /*overflow: hidden;*/
  flex: 1;
  background-color: blue;
}
.info {
  max-width: 70%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}
.name {}

＆＃13;

<div class="cont">
  <div class="aside"></div>
  <div class="nav">
    <div class="info">
      <span class="name"> tes te s dnaosdjw d adondnasjdoqnsnda djj</span>
    </div>
  </div>
</div>

＆＃13;

Answer 1

因为弹性容器的初始设置为flex-shrink: 1。这意味着允许弹性项目缩小，并且这样做是为了防止容器溢出。

您的.aside元素没有内容，因此算法会将宽度缩小为0，以便为兄弟提供更多空间，并确保没有任何内容溢出容器。

您可以使用flex-shrink: 0覆盖此设置（意味着缩小功能已禁用）。

＆＃13;

.cont {
    width: 200px;
    height: 300px;
    background-color: red;
    display: flex;
}

.aside {
    width: 50px;
    height: 100%;
    background-color: green;
    flex-shrink: 0;            /* new */
}

.nav {
    overflow: hidden;
    flex: 1;
    background-color: aqua;    /* adjusted color for readability */
}

.info {
    max-width: 70%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
}

＆＃13;

<div class="cont">
    <div class="aside"></div>
    <div class="nav">
        <div class="info">
            <span class="name"> tes te s dnaosdjw d adondnasjdoqnsnda djj</span>
        </div>
    </div>
</div>

＆＃13;

为什么flex布局会受到溢出内容的影响？

1 个答案: