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

Question

我有一个问题...如果我使用简单的 flex 结构来保持我在使用长内容时定义的 flex 比率，它会起作用： 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>

有人有解决办法吗？谢谢

Answer 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>

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

Flex height problems when use overflow content

html

css

flexbox

responsive