All geek questions in one place

How to control the height of a child div of a flex element

Descriptive Plunker: http://plnkr.co/edit/remH1RtkY1qBk0A7J4Tp?p=preview

I have a flexbox container containing two flex elements ("header" and "content"). The content of the div has one child div, which I want to control the height of. But no matter how I set the height of this div, the height remains by default.

Here's the markup / CSS:

<!DOCTYPE html>
<html>
  <head>
    <style>
      div { padding:15px; }

      .container
      {
        background-color:gold;
        height:500px;
        display:flex;
        flex-flow:column nowrap;
      }
      .header
      {
        background-color:pink;
        /* no flex shrink/grow */
      }
      .content
      {
        background-color:aquamarine;
        flex:1 1;/* allow filling space */
      }
      .myContentItem
      {
        background-color:khaki;
        display:block;
        height:50%;/* <-----------this is ignored */
      }
    </style>
  </head>

  <body>

    <div class="container">
      <div class="header">header<br />yo</div>
      <div class="content">
        <div class="myContentItem">I want this to be 50% the height of content div</div>
      </div>
    </div>

  </body>

</html>

edit: I know that I could use display:absoluteit to work on this contrived example. I'm more curious about why this is happening and how to handle it properly, rather than looking for a workaround.

+2
source share
2 answers

.content .myContentItem, .

padding:0; .content padding-top:0; padding-bottom: 0; .myContentItem.

.content{padding:0;}
.myContentItem{padding-top:0;padding-bottom:0;}
0

Source: https://habr.com/ru/post/1584063/

More articles:


All Articles