Проблемы с изгибом при использовании содержимого переполнения

Question

У меня проблема ... Если я использую простую структуру изгиба, чтобы сохранить коэффициент изгиба, который я определил при использовании длинного контента, он работает: 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>