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

Question

I am doing a course on Frontend Masters. This is the first project of the introductory course. I made the website according to the one said at: https://btholt.github.io/intro-to-web-dev-v2/news.html

Here's my HTML code:

<!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>

Here's my CSS code:

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;;
}

However you would see that on zooming in the page, the inner-flex div doesnt occupy the whole length. Any ideas how to fix it?

Your code gives out the same output as the website, What do you mean by `inner-flex` and `whole length` — Rainbow, Sep 06 '20 at 20:42
@zohirSalak I was talking about the class inner-flex (The section that contains the Links to Politics, Technology, Sports, opinion, Local). Just zoom in the page and you would see that its not occupying the entire height as the adjacent sibling. — Varun Dalal, Sep 06 '20 at 21:01

score 1 · Accepted Answer · answered Sep 06 '20 at 22:01

This is because you have a different structure of elements.

In the original example the parent flex row (<section class="row">) has set align-items: stretch; css property. This is responsible for the stretching.

Original:

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

This is actually working in your code, but it is applied to the extra container div (<div class="blk s75">) only and it does not apply to the contents of that container. So your .inner-flex will not be stretched but rather gets the height to fit its contents.

Your code:

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

You can fix this by fixing the structure and eliminating that extra container or (as already suggested in the comments) by applying the css property height: 100%; to the class .inner-flex.

You can also apply the css property flex-grow: 1; to the .element class to close the gaps between the boxes (this was technically also suggested in the comments, as flex: 1; is a shortcut property that sets flex-grow among others).

Thanks for the suggestion... Thats what I was thinking where did i made a mistake in the structure. — Varun Dalal, Sep 07 '20 at 12:55

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

1 Answers1