Flexbox的百分比高度

Shinji-san 发表于 Dev

真二山

我试图理解为什么80％和90％的高度似乎不起作用。我希望文本能适合我，但是即使我将容器高度设置为100％或calc(100vh - 150px)，尽管它确实增加了，但也没有达到我期望的值。下面是问题的图片。

* {
  margin: 0;
}
html,
body {
  height: 100%;
}
#bigwrap {
  position: relative;
  height: calc(100vh - 150px);
  width: 100%;
}
.container {
  display: flex;
  position: absolute;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  width: 80%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 100%;
}
.container img {
  width: 200px;
  height: 200px;
}
.left {
  display: flex;
  flex-flow: column wrap;
  align-items: flex-start;
  justify-content: space-around;
  order: 1;
  background: red;
  flex-basis: 100%;
  height: 100%;
}
.left img {
  max-width: 100%;
}
.middle {
  display: flex;
  flex-flow: column wrap;
  align-content: flex-start;
  justify-content: space-around;
  order: 3;
  background: green;
  flex-basis: 100%;
  height: 100%;
}
.right {
  text-align: center;
  order: 2;
  background: yellow;
  flex-basis: 100%;
  height: 100%;
}
.box {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  justify-content: flex-start;
  height: 200px;
  width: 200px;
}
@media screen and (min-width: 600px) {
  .container {
    flex-wrap: nowrap;
  }
  .left {
    flex-basis: 1;
    order: 1;
  }
  .middle {
    flex-basis: 1;
    order: 2;
  }
  .right {
    flex-basis: 1;
    order: 3;
  }
}

<div id="bigwrap">
  <div class="container">
    <div class="left">
      <img src="cat1.jpeg" alt="cat">
      <img src="cat1.jpeg" alt="cat">
    </div>
    <div class="middle">
      <div class="box">
        <p>
          This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text.
          This is text. This is text. This is text. This is text. This is text. This is text.
        </p>
      </div>
      <div class="box">
        <p>
          This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text.
          This is text. This is text. This is text. This is text. This is text. This is text.
        </p>
        <p>
          This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text.
          This is text. This is text. This is text. This is text. This is text. This is text.
        </p>
      </div>
    </div>
    <div class="right">
      <p>texteiehiefief texteiehiefief texteiehiefief texteiehiefief</p>
      <p>texteiehiefief texteiehiefief texteiehiefief texteiehiefief</p>
      <p>texteiehiefief texteiehiefief texteiehiefief texteiehiefief</p>
    </div>
  </div>

迈克尔·本杰明（Michael Benjamin）

* {
    margin: 0;
}

html,
body {
    height: 100%;
}

#bigwrap {
    position: relative;
    height: 100%;
}

.container {
 display: flex;
 position: absolute;
 flex-wrap: wrap;
 justify-content: center;
 align-items: flex-start;
 height: 100%;
 width: 80%;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%); /* http://stackoverflow.com/q/36817249/3597276 */
}

.container img {
    width: 200px;
    height: 200px;
}

.left {
    display: flex;
    flex-flow: column wrap;
    align-items: flex-start;
    justify-content: space-around;
    order: 1;
    background: red;
    flex-basis: 100%;
    height: 100%;
}

.left img {
    max-width: 100%;
}

.middle {
    display: flex;
    flex-flow: column wrap;
    order: 3;
    background: green;
    flex-basis: 100%;
    height: 100%;
}

.right {
    text-align: center;
    order: 2;
    background: yellow;
    flex-basis: 100%;
    height: 100%;
}

.box {
    /* height: 200px;          Remove. This limits the height of the paragraph */
    width: 200px;
}

.box > p {
    margin-bottom: 25px;       /* create separation between text boxes */
}

@media screen and (min-width: 600px) {
    .container {
        flex-wrap: nowrap;
    }
    .left {
        flex-basis: 1;
        order: 1;
    }
    .middle {
        flex-basis: 1;
        order: 2;
    }
    .right {
        flex-basis: 1;
        order: 3;
    }
}

<div id="bigwrap">
  <div class="container">
    <div class="left">
      <img src="cat1.jpeg" alt="cat">
      <img src="cat1.jpeg" alt="cat">
    </div>
    <div class="middle">
      <div class="box">
        <p>
          This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text.
          This is text. This is text. This is text. This is text. This is text. This is text.
        </p>
      </div>
      <div class="box">
        <p>
          This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text.
          This is text. This is text. This is text. This is text. This is text. This is text.
        </p>
        <p>
          This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text.
          This is text. This is text. This is text. This is text. This is text. This is text.
        </p>
      </div>
    </div>
    <div class="right">
      <p>texteiehiefief texteiehiefief texteiehiefief texteiehiefief</p>
      <p>texteiehiefief texteiehiefief texteiehiefief texteiehiefief</p>
      <p>texteiehiefief texteiehiefief texteiehiefief texteiehiefief</p>
    </div>
  </div>