0

I am having problems setting the height of a flex item to the 100% of the height of the father. As far as I know, declaring height: 100% or even height: inherit should do the trick. However, that is not working.

Here is the code:

<nav 
    class="navbar navbar-expand-md navbar-dark justify-content-end py-0"
    style="background-color: navy"
>
    <a class="navbar-brand mr-auto" style="font-size: 40px;" href="/">Logotipo</a>

    <div id="search-box">
        <i class="fas fa-search"></i>
    </div>


    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-nav" aria-controls="main-nav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div id="main-nav" class="collapse navbar-collapse flex-grow-0 text-right">
        <div class="navbar-nav stroke-hover">
            <a class="nav-item nav-link flex-grow-0 active" on-tap="changePage">Noticias</a>
            <a id="statistics" class="nav-item nav-link flex-grow-0" on-tap="changePage">Estadísticas</a>
        </div>
    </div>
</nav>

And here is the code snippet.

The element I am tryng to give the full height is div#search-box.

TylerH
  • 20,799
  • 66
  • 75
  • 101
Luiscri
  • 913
  • 1
  • 13
  • 40
  • Can you elaborate more on your question and tell what is the height of the search bar you're trying to get to? – Mohammed Junaid Mar 23 '20 at 15:01
  • The problem is I define most of my CSS by bootstrap predefined classes. However I will try to separate some of the CSS for the question @canon – Luiscri Mar 23 '20 at 15:02
  • I want that, despite of the height of the flex element (nav), the flex item `div#search-box` has the full height of its parent. In this case the height is due to `navbar-brand` item, which is the one higher one. @MohammedJunaid – Luiscri Mar 23 '20 at 15:05
  • 1
    @Lusicri You can use "align-items: stretch" on your parrent(.navbar) and it should work – Mohammed Junaid Mar 23 '20 at 15:29
  • @MohammedJunaid Yes, I tried doing so but didn't work. The problem was that I was also setting height: 100% besides align-stretch, so it was not doing the work. Deleting that property solved the problem. – Luiscri Mar 23 '20 at 15:32

0 Answers0