为什么我的 flexbox 没有占据它所在容器的整个高度？答案

【问题标题】：Why does my flexbox does not occupy the entire height of the container it is enclosed in?为什么我的 flexbox 没有占据它所在容器的整个高度？
【发布时间】：2020-09-06 20:30:30
【问题描述】：

我正在学习前端大师课程。这是入门课程的第一个项目。我按照上面说的做了网站：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;;
}

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

【问题讨论】：

你的代码输出和网站一样，inner-flex和whole length是什么意思
@zohirSalak 我说的是 inner-flex 类（包含政治、技术、体育、意见、本地链接的部分）。只需放大页面，您就会看到它没有像相邻兄弟一样占据整个高度。
height:100% for .inner-flex and flex:1 for .element

标签： html css flexbox flexboxgrid

【解决方案1】：

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

在原始示例中，父 flex 行 (<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>

您可以通过修复结构并消除额外的容器来解决此问题，或者（如 cmets 中已经建议的那样）通过将 css 属性 height: 100%; 应用于类 .inner-flex 来解决此问题。

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

【讨论】：

感谢您的建议...这就是我的想法，我在哪里犯了结构错误。