CODEWITHSUNDEEP
cssflexbox
zsitro
zsitro

Reputation: 1892

Flexbox child collapsed after aligning

Can't figure out how to keep the child items same height on both sides after aligning their content to the middle.

My aim is to create a layout as seen in picture: enter image description here

  <div class="halves">
<div class="half">
   <div class="half-inner is-right">H1</div>
</div>    
<div class="half">
  <div class="half-inner is-left">H2
  <br> asdfs df <br>a sdfadsf sdfa dadsf df asdf afdf sadf asdf  </div>
</div>    


.halves{
  display: flex;
  border: 5px solid red;  
  .half{
    flex: 1;
    border: 10px solid yellow;
    /* align-items: center; */
    display: flex;    

    .half-inner{
      max-width: 100px;


      &.is-right{
        margin-left: auto;
        background: pink;
      }      
      &.is-left{
        background: green;
      }

    }
  }
}

My current code here: http://codepen.io/zsitro/pen/YqpLba In my example uncommenting /* align-items: center; */ you can see the child item collapses.

I appreciate any guidance. ty

Upvotes: 1

Views: 2814

Answers (1)

litel
litel

Reputation: 3990

align-items: center forces the div into the center of a flex container, and in the event of no specific declarations of width/height/flex-basis/whatnot, it makes the div as big as its content, preserving the whitespace. If you want the div to stretch, you will need the the align-items value to be stretch so it takes up the entire height of the parent container.

Additionally, if you want the .half-inner divs to be equal in width: flex: 1 (or flex-grow: 1) is a child property, so the declaration you currently have only applies to the .half divs, not the .half-inner divs. Since the parent .half div is a flex container, you can just add flex:1 under the .half-inner CSS and you should be good to go. 

.halves{
  display: flex;
  border: 5px solid red;  
  .half{
    flex: 1;
    border: 10px solid yellow;
     align-items: stretch; 
    display: flex;    

    .half-inner{
      max-width: 100px;
      flex: 1;

      &.is-right{
        margin-left: auto;
        background: pink;
      }      
      &.is-left{
        background: green;
      }

    }
  }
}

Upvotes: 2

Related Questions