2

As you can see in this codepen https://codepen.io/anon/pen/yELMrv , the red column's height is the same as the blue one even though there's less content. I want my red column's height to be determined by the content inside of it.

.column-layout{
    display: flex;
}
.one{
    background-color: blue;
    flex: 3;
}
.two{
    background-color: red;
    flex: 1;
}
<div class='column-layout'>
  <div class='one'>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
  </div>
    <div class='two'>
      <p>Hello</p>
      <p>Hello</p>
      <p>Hello</p>
    </div>
</div>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Onyx
  • 5,186
  • 8
  • 39
  • 86

1 Answers1

6

You add to .column-layout align-items: flex-start;.

This will cause all items of flex container to be positioned at the beginning of the container. However if you want only a certain child to be positioned at the start of the container you add align-self: flex-start

.column-layout{
    display: flex;
    align-items: flex-start;
}
.one{
    background-color: blue;
    flex: 3;
}
.two{
    background-color: red;
    flex: 1;
}
<div class='column-layout'>
  <div class='one'>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
    <p>Hello</p>
  </div>
    <div class='two'>
      <p>Hello</p>
      <p>Hello</p>
      <p>Hello</p>
    </div>
</div>
Kushtrim
  • 1,899
  • 6
  • 14