子 div 在 flex 框中的高度有问题 属性

Question

我一直遇到问题，弹性容器的子 div 占据了它们所在容器的整个高度。我试过继承高度和百分比，但它不起作用。理想情况下，我要这样做 format。

这是我目前的代码。

* {
  box-sizing: border-box;
}

html {
  margin: 0;
  padding: 0;
}

body {
  background: url(images/raindrops.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.content-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90vw;
  height: 70vh;
  background-color: cyan;
}

.row {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  width: 100%;
}

.side {
  height: inherit;
  flex: 10%;
  background-color: #2B1426;
}

ul {
  position: relative;
  justify-content: center;
}

.side li {
  font-size: 1.7rem;
  list-style-type: none;
  color: white;
  padding-top: 50px;
}

.main {
  flex: 85%;
  flex-direction: column;
  height: inherit;
}

.city-selector {
  display: flex;
  flex: 25%;
  background-color: grey;
  padding: 20px;
}

.row-2 {
  flex: 75%;
  display: flex;
  flex-wrap: wrap;
}

.current-city {
  flex: 25%;
  background-color: lightblue;
}

.forecast {
  flex: 75%;
  background-color: lightyellow;
}

<div class="content-container">
  <div class="row">
    <div class="side">
      <ul>
        <li><i class="fas fa-home"></i></li>
        <li><i class="fas fa-map-marker-alt"></i></li>
        <li><i class="fas fa-bars"></i></li>
        <li><i class="fas fa-cloud"></i></li>
        <li><i class="fas fa-cog"></i></li>
      </ul>
    </div>
    <div class="main">
      <div class="city-selector">
        <h2>TITLE HEADING</h2>
        <h5>Title description, Dec 7, 2017</h5>
        <p>Some text..</p>
        <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
        <br>
      </div>
      <div class="row-2">
        <div class="current-city">
          <h1> current city</h1>
        </div>
        <div class="forecast">
          <h1> forecast</h1>
        </div>
      </div>
    </div>
  </div>
</div>

任何帮助将不胜感激！

Answer 1

对于 city-selector 和 row-2 选择器 flex: 75% 到 height: 75%，使用高度 height: 25% 而不是 flex: 25%。为 html,body and containers.

创建 height: 100%

参考下面的代码片段。

* {
  box-sizing: border-box;
}

html {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: url(images/raindrops.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  margin: 0;
  height: 100%;
}

.content-container {
  background-color: cyan;
  height: 100%;
}

.row {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  width: 100%;
}

.side {
  flex: 10%;
  background-color: #2B1426;
}

ul {
  position: relative;
  justify-content: center;
}

.side li {
  font-size: 1.7rem;
  list-style-type: none;
  color: white;
  padding-top: 50px;
}

.main {
  flex: 90%;
  flex-direction: column;
}

.city-selector {
  display: flex;
  height: 25%;
  background-color: grey;
  padding: 20px;
}

.row-2 {
  height: 75%;
  display: flex;
  flex-wrap: wrap;
}

.current-city {
  flex: 25%;
  background-color: lightblue;
}

.forecast {
  flex: 75%;
  background-color: lightyellow;
}

<div class="content-container">
  <div class="row">
    <div class="side">
      <ul>
        <li><i class="fas fa-home"></i></li>
        <li><i class="fas fa-map-marker-alt"></i></li>
        <li><i class="fas fa-bars"></i></li>
        <li><i class="fas fa-cloud"></i></li>
        <li><i class="fas fa-cog"></i></li>
      </ul>
    </div>
    <div class="main">
      <div class="city-selector">
        <h2>TITLE HEADING</h2>
        <h5>Title description, Dec 7, 2017</h5>
        <p>Some text..</p>
        <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
        <br>
      </div>
      <div class="row-2">
        <div class="current-city">
          <h1> current city</h1>
        </div>
        <div class="forecast">
          <h1> forecast</h1>
        </div>
      </div>
    </div>
  </div>
</div>