为什么在内部div中添加溢出控制会破坏外部容器的弯曲流? [英] Why adding overflow control to inner div is breaking outer container flex flow?

问题描述

请查看结尾处的编辑.

我的网站在左侧有一个导航面板，在右侧有一个主面板.在main内部，我有一个标题和两个div:一个在上方(带有鲸鱼图片)，另一个在下方(带有巴西地图).如果我向第一个div添加一个溢出控件(以便在其中只有一个水平滚动条)，则第二个div开始覆盖第一个div.如果溢出仅控制div内部的行为，那么为什么会发生这种情况?

My site has a nav panel at the left, and a main panel at the right. Inside main, I have a title and two divs: one above (with whale pictures) and other below (with a Brazilian map). If I add an overflow control to the first div (so as to have only a horizontal scroll bar inside it), the second div starts to overlay the first. If overflow only controls the behavior inside the div, then why is this happening?

我创建了两个片段来说明问题.在第一个中，两个div都出现，但是第一个没有溢出控制.在第二个片段中，第一个div具有溢出控制功能，但是它已隐藏在第二个div下.

I created two snippets to illustrate the problem. In the first, both divs appear, but the first has no overflow control. In the second snippet, the first div has overflow control, but it's getting hidden under the second div.

这是一个错误，还是我很累以至于我缺少明显的东西?

Is this a bug, or am I so tired that I'm missing something obvious?

代码段1-在 div.imgs 上没有溢出控制:

Snippet 1 - without overflow control on div.imgs:

body {
    margin:0;
    width:100vw;
    height:100vh;
    display:flex;
    overflow:hidden;
}
nav {
    background:#c0ffc0;
    width:29vw;
}
main {
    background:#ffffc0;
    width:69vw;
    display:flex;
    flex-direction:column;
    overflow-x:hidden;
    overflow-y:auto;
}
div.imgs {
    background:black;
    display:flex;
    flex-wrap:nowrap;
    height:calc(150px + 1em);
    width:100%;
}
div.imgs img {
    height:150px;
    margin:0.5em 0 0.5em 0.5em;
}
div.map {
    border:1px solid red;
}

<nav>
  <ul>
    <li>Text1</li>
    <li>Text2</li>
    <li>Text3</li>
  </ul>
</nav>
<main>
  <h3>Title</h3>
  <div class='imgs'>
    <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/1/1c/Anim1754_-_Flickr_-_NOAA_Photo_Library.jpg/640px-Anim1754_-_Flickr_-_NOAA_Photo_Library.jpg' />
    <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Humpback_stellwagen_edit.jpg/640px-Humpback_stellwagen_edit.jpg' />
    <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Southern_right_whale.jpg/400px-Southern_right_whale.jpg' />
  </div>
  <div class='map'>
    <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Brazil_topo.jpg/474px-Brazil_topo.jpg' />
  </div>
</main>

代码段2-在 div.imgs 上具有溢出控制:

Snippet 2 - with overflow control on div.imgs:

body {
    margin:0;
    width:100vw;
    height:100vh;
    display:flex;
    overflow:hidden;
}
nav {
    background:#c0ffc0;
    width:29vw;
}
main {
    background:#ffffc0;
    width:69vw;
    display:flex;
    flex-direction:column;
    overflow-x:hidden;
    overflow-y:auto;
}
div.imgs {
    background:black;
    display:flex;
    flex-wrap:nowrap;
    height:calc(150px + 1em);
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
}
div.imgs img {
    height:150px;
    margin:0.5em 0 0.5em 0.5em;
}
div.map {
    border:1px solid red;
}

<nav>
  <ul>
    <li>Text1</li>
    <li>Text2</li>
    <li>Text3</li>
  </ul>
</nav>
<main>
  <h3>Title</h3>
  <div class='imgs'>
    <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/1/1c/Anim1754_-_Flickr_-_NOAA_Photo_Library.jpg/640px-Anim1754_-_Flickr_-_NOAA_Photo_Library.jpg' />
    <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Humpback_stellwagen_edit.jpg/640px-Humpback_stellwagen_edit.jpg' />
    <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Southern_right_whale.jpg/400px-Southern_right_whale.jpg' />
  </div>
  <div class='map'>
    <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Brazil_topo.jpg/474px-Brazil_topo.jpg' />
  </div>
</main>

编辑

我看不出这是这个问题的重复形式或它的某些封闭副本，例如 this 和此.这三个问题都在于，内部div的增长超出了预期，而我的div却缩小到完全被隐藏的程度.

I don't see how this is a duplicate of this question, or some of its closed duplicates, such as this and this. In all three, the problem is that the inner div is growing larger than desired, while mine is shrinking to the point of getting completely hidden.

默认设置为:一个伸缩项目不能小于其内容在主轴上的大小.但是，我的伸缩项目正在小于其内容的大小.

The default setting states: A flex item cannot be smaller than the size of its content along the main axis. However, my flex item IS getting smaller than the size of its content.

推荐答案

body {
    margin:0;
    width:100vw;
    height:100vh;
    display:flex;
    overflow:hidden;
}
nav {
    background:#c0ffc0;
    width:29vw;
}
main {
    background:#ffffc0;
    width:69vw;
    display:flex;
    flex-direction:column;
    overflow-x:hidden;
    overflow-y:auto;
}
div.imgs {
    background:black;
    display:flex;
    flex-wrap:nowrap;
    min-height:calc(150px + 1em);
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
}
div.imgs img {
    height:150px;
    margin:0.5em 0 0.5em 0.5em;
}
div.map {
    border:1px solid red;
}

<nav>
  <ul>
    <li>Text1</li>
    <li>Text2</li>
    <li>Text3</li>
  </ul>
</nav>
<main>
  <h3>Title</h3>
  <div class='imgs'>
    <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/1/1c/Anim1754_-_Flickr_-_NOAA_Photo_Library.jpg/640px-Anim1754_-_Flickr_-_NOAA_Photo_Library.jpg' />
    <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Humpback_stellwagen_edit.jpg/640px-Humpback_stellwagen_edit.jpg' />
    <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Southern_right_whale.jpg/400px-Southern_right_whale.jpg' />
  </div>
  <div class='map'>
    <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Brazil_topo.jpg/474px-Brazil_topo.jpg' />
  </div>
</main>

我要做的就是将 height 更改为 min-height (在div.imgs中).

All I had to do is change height into min-height (in div.imgs).

这篇关于为什么在内部div中添加溢出控制会破坏外部容器的弯曲流?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！