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
  • 307,417
  • 93
  • 525
  • 644
Bobimaru
  • 4,396
  • 5
  • 24
  • 52

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,859
  • 5
  • 14