为什么我的div不能应用高度100%？

Question

有人能解释一下为什么 div.project-desc 的高度（div.project 的 child）在 div.project 时不占据其容器的 100%徘徊？当视口宽度小于 769px 时会发生这种情况。当视口的大小大于 769px 时，一切都按预期工作。我正在使用 Bulma .tile 和 .box。我知道这与 .tile 元素的媒体查询存在某种冲突，但我无法弄清楚它是什么。谢谢！代码笔：https://codepen.io/albertrf147/pen/OqOJqG?editors=1100

<section class="section is-white has-text-centered">
    <div class="container is-narrow">
      <h1 class="title">My Projects</h1>
      <h2 class="subtitle">Here is some of my work, which I'm most proud of.</h2>

      <div class="tile is-ancestor">

        <div class="tile is-4 is-vertical is-parent">

          <div id="project-1" class="tile is-child box is-vertical-center is-paddingless project">
            <div class="project-title">CodePen</div>
            <div class="project-desc">
              <p class="project-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis at rem numquam. Eveniet eos quae delectus et minus, eligendi, architecto ex sint assumenda saepe ut. Laborum unde possimus in voluptatum.</p>
            </div>
          </div>

          <div id="project-2" class="tile is-child box is-vertical-center is-paddingless project">
            <div class="project-title">Glitch</div>
            <div class="project-desc">
              <p class="project-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis at rem numquam. Eveniet eos quae delectus et minus, eligendi, architecto ex sint assumenda saepe ut. Laborum unde possimus in voluptatum.</p>
            </div>

          </div>
        </div>

        <div class="tile is-parent">
          <div id="project-3" class="tile is-child box is-vertical-center is-paddingless project">
            <div class="project-title">Another</div>
            <div class="project-desc">
              <p class="project-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis at rem numquam. Eveniet eos quae delectus et minus, eligendi, architecto ex sint assumenda saepe ut. Laborum unde possimus in voluptatum.</p>
            </div>

          </div>
      </div>

    </div>
  </div></section>

CSS

@charset "utf-8";
@import url("https://fonts.googleapis.com/css?family=Montserrat");
@import url("https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css");

* {
  font-family: "Montserrat" !important;
}

body {
  background: #f5f5f5;
}

.hero-foot img {
  height: 300px;
  width: 100%;
  object-fit: cover;
}

.list {
  margin-top: 30px;
}

.container.is-narrow {
  max-width: 1000px;
}

.skills {
  margin-top: -200px;
}

.tile.is-child {
  min-height: 200px;
}

.is-child.box {
  background-size: cover;
}

#project-1 {
  background-image: url("https://images.pexels.com/photos/449627/pexels-photo-449627.jpeg?cs=srgb&dl=beach-beautiful-bridge-449627.jpg&fm=jpg");
}

#project-2 {
  background-image: url("https://images.pexels.com/photos/97077/pexels-photo-97077.jpeg?cs=srgb&dl=ai-codes-coding-97077.jpg&fm=jpg");
}

#project-3 {
  background-image: url("https://images.pexels.com/photos/5836/yellow-metal-design-decoration.jpg?cs=srgb&dl=art-creative-creativity-5836.jpg&fm=jpg");
}

.project {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  cursor: pointer;
}

.project-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  //background: #000;
  opacity: 0.5;
  color: white;
  line-height: 2.5em;
  z-index: 2;
}

.project:hover .project-title {
  visibility: hidden;
}

.project-desc {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 2.5em;
  padding: 0 24px;
  text-align: justify;
  //border-radius: 5px;
  color: transparent;
  background: #000;
  opacity: 0.5;
  //visibility: hidden;
  z-index: 1;
  transition: all 0.2s ease;
}

.project:hover .project-desc {
  color: #fff;
  height: 100%;
  border-radius: 5px;
}

.project-text {
  font-size: 0.8em;
}

布尔玛css

@media screen and (min-width: 769px), print
.tile.is-4 {
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
    width: 33.33333%;
}

@media screen and (min-width: 769px), print
.tile:not(.is-child) {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.tile.is-vertical {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}
.tile.is-parent {
    padding: .75rem;
}
.tile {
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    display: block;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-negative: 1;
    flex-shrink: 1;
    min-height: -webkit-min-content;
    min-height: -moz-min-content;
    min-height: min-content;
}

Answer 1

如果您在 .project-desc class 中添加 position: absolute，它将起作用。我是根据你的codepen回答的 link.

Answer 2

bulma .tile 不是 769w 以下的弹性容器。您可以通过将以下代码添加到 css 来强制父图块成为弹性容器。这不会影响任何其他内容。

.tile.is-parent {
  display: flex;
}

为什么我的div不能应用高度100%？

Why can height 100% not be applied in my div?

html

css

bulma