为什么我的flexbox不会占据它所在容器的整个高度？

问题描述

我正在学习前端大师课程。这是入门课程的第一个项目。我是按照https://btholt.github.io/intro-to-web-dev-v2/news.html

中所说的方法创建网站的

这是我的HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <link href="https://fonts.googleapis.com/css2?family=Cedarville+Cursive&display=swap" rel="stylesheet">
    <Meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="P1.css">
    <link href="https://fonts.googleapis.com/css2?family=Aladin&display=swap" rel="stylesheet">
    <title>The News Times</title>
    <link href="https://fonts.googleapis.com/css2?family=Monoton&display=swap" rel="stylesheet">
</head>
<body>
    <div>
        <h1 class="heading">The News Times</h1>
    </div>
    <div class="flex">
        <div class="blk s25">
            <h3 class="title">Student Learns HTML</h3>
            <p>Lorem ipsum dolor sit,amet consectetur adipisicing elit. Porro,reprehenderit! 
                Et tempora eum consequuntur dolores quasi iusto deserunt illo aperiam eaque consectetur sequi qui amet sint,dolore nesciunt repellat ipsum?
            </p>
            <p>Lorem ipsum dolor sit,dolore nesciunt repellat ipsum?
            </p>
        </div>
        <div class="blk s50">
            <h3 class="title">BREAKING: Puppies are adorable</h3>
            <img src="http://placecorgi.com/600/300" alt="Corgie" style="width: 96%;">
            <p>Lorem ipsum dolor sit,dolore nesciunt repellat ipsum?
            </p>
        </div>
        <div class="blk s25">
            <h3 class="title">CSS is Apparently a Thing</h3>
            <p>Lorem ipsum dolor sit,dolore nesciunt repellat ipsum?
            </p>    
        </div>
    </div>
    <div class="flex">
        <div class="blk s25 cust">
            <h3 class="title">Boy likes Turtle</h3>
            <p>Lorem ipsum dolor sit,dolore nesciunt repellat ipsum?
            </p>
            <p>Voluptate,ut,cupiditate ducimus vitae blanditiis ex impedit debitis est tempora dolores nam sed. Esse nobis 
               ea inventore qui enim quia beatae ab commodi laboriosam quam aliquam aut perspiciatis fuga nam rerum temporibus 
               voluptatum explicabo voluptate,pariatur ullam laudantium eligendi.
            </p> 
        </div>
        <div class="blk s75">
            <div class="inner-flex">
                <div class="element politics">
                    <h1><a href="#">Politics</a></h1>
                </div>
                <div class="element technology">
                    <h1><a href="#">Technology</a></h1>
                </div>
                <div class="element local">
                    <h1><a href="#">Local</a></h1>
                </div>
                <div class="element sports">
                    <h1><a href="#">Sports</a></h1>
                </div>
                <div class="element opinion">
                    <h1><a href="#">Opinion</a></h1>
                </div>
                
            </div>
        </div>
    </div>
</body>
</html>

这是我的CSS代码：

body
{
    background-color: indianred;
}

.heading
{
    text-align: center;
    font-size: 120px;
    font-family: 'Cedarville Cursive',cursive;
    margin: 0px 0px;
}
.flex
{
    display: flex;
    align-items:stretch;
    border: 2px solid black;
    align-content: center;
    margin:2.0%;
    height: 100%;
   
}
.blk
{
    padding: 7px;
    text-align: center;
    
}
.s50
{
    width: 50%;
    border-left: 2px solid black;
    border-right: 2px solid black; 
    
}

.s25
{
    height: inherit;
    width: 25%;
}
.s75
{
    width: 75%;
}
.title
{
    font-family: 'Aladin',cursive;
    font-size: 60px;
}

.cust
{
    border-right: 2px black solid;
}
.inner-flex
{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  padding: 0;
  margin: 0;
}



p{
    text-align: justify;
}
.element
{
    text-align:left;
}
.politics
{
    background-color: #ffeaa7;;
}

.technology
{
    background-color: #81ecec;;
}

.local
{
    background-color: #55efc4;;
}

.sports
{
    background-color: #a29bfe;;
}

.opinion
{
    background-color: #74b9ff;;
}

但是，您会看到在放大页面时，inner-flex div不会占据整个长度。有任何解决方法的想法吗？

解决方法

这是因为您具有不同的元素结构。

在原始示例中，父级伸缩行（<section class="row">）设置了align-items: stretch; css属性。这是拉伸的原因。

原文：

<section class="row">
    <article class="story quarter">
      <!-- content //-->
    </article>
    <ul class="story three-quarter other-sections">
       <!-- links //-->
    </ul>
</section>

这实际上在您的代码中有效，但是它仅适用于额外的容器div（<div class="blk s75">），而不适用于该容器的内容。因此，您的.inner-flex不会被拉伸，而会达到适合其内容的高度。

您的代码：

<div class="flex">
    <div class="blk s25 cust">
        <!-- content //-->
    </div>
    <div class="blk s75">
        <div class="inner-flex">
            <!-- links //-->
        </div>
    </div>
</div>

您可以通过固定结构并消除该多余的容器来解决此问题，或者（如注释中所建议的那样）通过将css属性height: 100%;应用于类.inner-flex来解决此问题。

您还可以将css属性flex-grow: 1;应用于.element类，以缩小框之间的间隙（在技术上，注释中也建议这样做，因为flex: 1;是一种快捷方式属性可以设置弹性增长）。

flexbox html