CODEWITHSUNDEEP
cssflexbox
panthro
panthro

Reputation: 24099

Set child of flex element to be height of parent?

JSFiddle

I wish to have a to the left and b to the right. In the center is a list aligned horizontally. I want the full-height div to be the height of the parent.

So:

a            1 2 3             b

Here's the HTML:

<div class="container">
  <div class="a">
    a
  </div>

  <div class="full-height">
      <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
     </ul>
  </div>

  <div>
      b
  </div>
</div>

I've looked at other SO posts which have 2 solutions:

Any ideas?

Upvotes: 1

Views: 3917

Answers (1)

Max Novich
Max Novich

Reputation: 1169

You need to use align-self:stretch; on the .full-height element.

To align elements inside the list I added:

 align-items: center;
 display: flex;
 justify-content: center;

to the .full-height and a, also removed the padding from the ul.

UPDATE 1:

Updated to meet the comment. Moved flex content to ul instead of .full-height and added height 100% to ul.

You can read more about how flex works in this article.

.container{
  display: flex;
  position: static;
  width: 100%;
  background: gold;
  align-items: center;
  justify-content: space-between;
}
.a{
  height: 300px;
     align-items: center;
    display: flex;
    justify-content: center;
}
ul{
  list-style-type: none;
}
li{
  display: inline-block;
}
.full-height{
  background: tomato;
  align-self: stretch;
}

ul{
  height:100%;
  align-items: center;
  display: flex;
  justify-content: center;
  padding:0;
  margin:0;
}
<div class="container">
  <div class="a">
    a
  </div>
   <div class="full-height">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </div>
   <div>
    b
  </div>
  
</div>

Upvotes: 3

Related Questions