css - 为什么需要隐藏溢出才能使此 flex 布局正常工作？

问题描述

在下面的示例中，我不明白为什么我需要隐藏#articles. 对我来说，似乎因为我有article { flex: 1 1 auto; }它应该缩小并增长到父#articles高度。帮助表示赞赏！

html, body {
    height: 100vh;    
    overflow: hidden;
}
#container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: 100vh;
    overflow: hidden;
    
    width: 50%;
    background-color: red;
}

#container header {
    background-color: gray;
    flex: 0 0 auto;
}

#articles {
  display: flex;
  flex: 1 1 auto;
  flex-direction: row;
  /* Why is this required? */
  /* overflow: hidden; */
}

article {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0px;
}

article + article {
  background-color: blue;
}
#container footer {
    flex: 0 0 auto;
    background-color: gray;
}

<section id="container" >
    <header id="header" >This is a header</header>
    <section id="articles">
      <article>Short</article>
      <article id="content" >
        This is the content that
        <br />
        With a lot of lines.
        <br />
        With a lot of lines.
        <br />
        This is the content that
        <br />
        With a lot of lines.
        <br />
        <br />
        This is the content that
        <br />
        With a lot of lines.
        <br />
        <br />
        This is the content that
        <br />
        With a lot of lines.
        <br />
    </article>
    </section>
    <footer id="footer" >This is a footer</footer>
</section>

标签： cssflexbox

我不确定，这完全基于我自己的经验......但是：

我做了一个代码笔来乱七八糟： https ://codepen.io/jorgeks/pen/gOgmPgO

#articles-wrapper {
    border: 4px solid pink;
  display: flex;
  flex: 1 1 auto;
  flex-direction: row;
  /* Why is this required? */
/*   overflow: hidden; */
    /* This also works, or anything in fact */
/*  overflow: auto; */
}

我认为问题在于您的蓝色内容实际上比带有的包装器大overflow: hidden，因此它不显示但仍然存在。Flex 会尝试适应那里，但您设置了一个溢出属性，因此它可能会忽略高度/宽度，因为您这么说。

因此，当您为蓝色块设置新的溢出属性时，您使其适合并出现滚动。

没有上下文，但是，为什么要使用所有这些溢出和固定高度？不是很平常的事吗...

另外，检查这些答案，可能会有所帮助：

css - 为什么需要隐藏溢出才能使此 flex 布局正常工作？

问题描述

解决方案

推荐阅读