为什么我的 flexbox 没有占据容器的整个高度？

Question

我正在上 Frontend Masters 课程。这是入门课程的第一个项目。我按照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, 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>
        </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, 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, 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>
        </div>
        <div class="blk s25">
            <h3 class="title">CSS is Apparently a Thing</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, 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>    
        </div>
    </div>
    <div class="flex">
        <div class="blk s25 cust">
            <h3 class="title">Boy likes Turtle</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>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;;
}

但是您会看到，在放大页面时，内部柔性 div 并没有占据整个长度。有什么解决办法吗？

Answer 1

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

在原始示例中，父弹性行 (<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%; 应用于 [=39] 来解决此问题=] .inner-flex.

您还可以将 css 属性 flex-grow: 1; 应用到 .element class 以缩小方框之间的间隙（技术上也建议这样做在评论中，因为 flex: 1; 是设置 flex-grow 等的快捷方式属性）。

为什么我的 flexbox 没有占据容器的整个高度？

Why does my flexbox does not occupy the entire height of the container it is enclosed in?

html

css

flexbox

flexboxgrid