CODEWITHSUNDEEP
htmlcssflexbox
Tristan Tran
Tristan Tran

Reputation: 1513

Grow flex columns in height but keep width fixed

I have two columns to take up 70% and 30% of the page width respectively. I would like them to grow vertically as more elements get added (and wrapped vertically as well).

But I can't get it to behave like that using flex as below. If one column grows, while the other remains the same, the growing column overwhelms the smaller one and pushes it into another row.

Any advice?

.column {
  display: flex;
  padding: 10px;
}

.left_column {
  flex: 1 1 70%;
}

.right_column {
  flex: 1 1 30%;
}
<div class="row">
  <div class="column left_column" style="background-color:#aaa;">
    <div>
      <button class="button b1"></button>
      <button class="button b1"></button>
      <button class="button b1"></button>
      <button class="button b1"></button>
      <button class="button b1"></button>
      <button class="button b1"></button>
      <button class="button b1"></button>
      <button class="button b1"></button>
      <button class="button b1"></button>
      <button class="button b1"></button>
      <button class="button b1"></button>
      <button class="button b1"></button>
    </div>
  </div>
  <div class="column right_column" style="background-color:#bbb;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
</div>

Upvotes: 1

Views: 442

Answers (2)

sibumi
sibumi

Reputation: 81

First of all, your CSS should be

`.row {
  display: flex;
  padding: 10px; 
}

.left_column {
  flex: 1 1 70%;
}

.right_column {
  flex: 1 1 30%;
}`

Because your outer container is the "row" class. After that you can also add "display: flex" to the columns(to left_column and right_column classes here.). I recommend reading this practical flexbox guide by CSSTricks.

Upvotes: 2

Endunry
Endunry

Reputation: 974

When i understand it right, this should help you.

body{
  margin:0;
}

.row{
  display:flex;
}

.left_column{
  width:70vw;
}

.right_column{
  width:30vw;
}
<div class="row">
        <div class="column left_column" style="background-color:#aaa;">
          <div>
            <button class="button b1"></button>
            <button class="button b1"></button>
            <button class="button b1"></button>
            <button class="button b1"></button>
            <button class="button b1"></button>
            <button class="button b1"></button>
            <button class="button b1"></button>
            <button class="button b1"></button>
            <button class="button b1"></button>
            <button class="button b1"></button>
            <button class="button b1"></button>
            <button class="button b1"></button>
          </div>
        </div>
        <div class="column right_column" style="background-color:#bbb;">
          <h2>Column 2</h2>
          <p>Some text..Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        </div>
      </div>

Upvotes: 2

Related Questions