使用溢出内容时的弹性高度问题答案

【问题标题】：Flex height problems when use overflow content使用溢出内容时的弹性高度问题
【发布时间】：2020-05-23 18:50:33
【问题描述】：

我有一个问题...如果我使用简单的弹性结构来保持我在使用长内容时定义的弹性比率，它可以工作： https://jsfiddle.net/4zgpnjmd/

但是如果我添加一个级别，则不会保留比例，并且内容长的 flex 的比例比其他的要大： https://jsfiddle.net/164wckrL/1/

html, body {
    margin: 0;
    height: 100%;
}

#wrap {
    display: flex;
    height: 100%;
}

#left-col {
    flex: 1;
    background: blue;
}

#right-col {
    flex: 2;
}

#wrap-left-col {
    display: flex;
    height: 100%;
    flex-direction: column;
}

header {
    flex: 1;
    background-color: gray;
}

#wrap-article {
    flex: 2;
    display: flex;
    height: 100%;
}

#article1 {
    flex: 2;
    background-color: red;
    overflow-y: auto;
    min-height: 0px;
}

#article2 {
    flex: 3;
    background: yellow;
}

footer {
    flex: 1;
    background-color: gray;
}

<div id="wrap">
    <div id="left-col"></div>
    <div id="right-col">
        <div id="wrap-left-col">
            <header id="header" >This is a header</header>
            <div id="wrap-article">
                <article id="article1">
                    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 />
                     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.
                </article>
                <article id="article2"></article>
            </div>
            <footer id="footer" >This is a footer</footer>
        </div>
    </div>
</div>

有人有解决办法吗？谢谢

【问题讨论】：

这远远不足以解释您的问题。如果您不添加更多详细信息来解释您的问题，包括所需的结果，它可能会被关闭。

标签： html css flexbox responsive

【解决方案1】：

如果你在谈论页眉、文章和页脚之间的垂直比例，试试这个：

html,
body {
  margin: 0;
  height: 100%;
}

#wrap {
  display: flex;
  height: 75%;
  overflow: hidden;
}

#left-col {
  flex: 1;
  background: blue;
}

#right-col {
  flex: 2;
}

#wrap-left-col {
  display: flex;
  height: 100%;
  flex-direction: column;
}

#header {
  flex: 1 1 25%;
  background-color: gray;
  min-height: 25%;
}

#wrap-article {
  flex: 2 1 50%;
  display: flex;
  overflow: hidden;
}

#article1 {
  flex: 2;
  background-color: red;
  overflow-y: auto;
}

#article2 {
  flex: 2;
  background: yellow;
}

#footer {
  flex: 1 1 25%;
  background-color: gray;
}

<div id="wrap">
  <div id="left-col"></div>
  <div id="right-col">
    <div id="wrap-left-col">
      <header id="header">This is a header</header>
      <div id="wrap-article">
        <article id="article1">
          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 /> 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.
        </article>
        <article id="article2"></article>
      </div>
      <footer id="footer">This is a footer</footer>
    </div>
  </div>
</div>

【讨论】：