How to set column height equal to longest column in Bulma (flexbox)?

Asked 22/4, 2017 at 20:17 Answered 5/1, 2023 at 12:26

Solved css flexbox bulma

I'm using Bulma 0.4.0, though the answer may not be associated with Bulma itself.

How can I set column height equal to others? (see screenshots below)

Edit: codepen with more text that presents actual behavior: https://codepen.io/anon/pen/vmKVbx

Expected behavior:

expected behavior

Actual behavior:

actual behavior

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.0/css/bulma.css" />
<div class="columns">
  <div class="column">
    <p class="notification is-info">First column</p>
  </div>
  <div class="column">
    <p class="notification is-success">Second column</p>
  </div>
  <div class="column">
    <p class="notification is-warning">Third column</p>
  </div>
  <div class="column">
    <p class="notification is-danger">Fourth</p>
  </div>
</div>

Manas answered 22/4, 2017 at 20:17 Comment(1)

Just add some more text and you will see my issue. On your screen columns with "column" in content are big enough so they are in one line, so they are equal. – Manas 23/4, 2017 at 7:2

Here is a simple solution, by adding this CSS rule, and make sure it load after the Bulma CSS

.column {
  display: flex;
}

Updated codepen

Stack snippet

<html>
  <head>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.0/css/bulma.css" />
  
    <style>
      .column {
        display: flex;
      }
    </style>

</head>
<body>
<div class="columns">
  <div class="column">
    <p class="notification is-info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu consectetur lorem, nec facilisis dolor. Morbi rhoncus, mi sit amet ornare tincidunt, augue sem aliquet mauris, non pretium orci nisl at est. Curabitur placerat pharetra augue. Etiam non eros nulla. Praesent aliquet sem dui, id varius enim convallis vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis mauris felis, sit amet consectetur augue sollicitudin id.</p>
  </div>
  <div class="column">
    <p class="notification is-success">Nulla a mauris vel erat elementum scelerisque. Cras mollis consequat neque, vitae sagittis nisl dapibus porttitor. Donec et rutrum ligula. Donec luctus iaculis orci, nec imperdiet felis semper quis. Nulla a convallis eros, facilisis hendrerit risus. Nulla sit amet porta quam. Nullam maximus tempus sem, dapibus dapibus purus sollicitudin vel. Phasellus at rhoncus odio. Quisque sit amet ornare dolor. Maecenas accumsan viverra tristique. Etiam vulputate nibh ipsum, at rutrum lacus hendrerit ut. Nunc sodales diam purus, in ultricies nulla consectetur sit amet. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus ut tincidunt mauris.</p>
  </div>
  <div class="column">
    <p class="notification is-warning">Pellentesque eros tortor, pharetra in lorem quis, maximus hendrerit ex. Praesent nunc ante, elementum at congue ut, ultricies quis lectus. Aenean vel elementum risus. Vestibulum aliquet justo in ligula dictum commodo. Nullam condimentum ante vitae nulla dignissim, vitae interdum neque dapibus. Aenean nec quam egestas, viverra ex vel, tempus lectus. Quisque eu euismod neque. Mauris aliquam neque a porta condimentum. Cras eget nisi turpis. Aenean lacus velit, dapibus eu aliquam eget, aliquet id quam. Integer ultricies est quis erat facilisis congue vel efficitur ipsum. Nunc id varius orci, consequat vehicula libero. Morbi maximus, orci in efficitur feugiat, quam lacus lobortis elit, in blandit mauris dolor sit amet mauris.
</p>
  </div>
  <div class="column">
    <p class="notification is-danger">Morbi turpis nunc, porttitor ut bibendum et, tincidunt vel nisi. Ut magna massa, placerat id nunc at, venenatis sodales leo. Nunc dapibus, lacus ac molestie vestibulum, tortor mauris posuere turpis, at pretium orci orci in justo.</p>
  </div>
</div>
</body>
</html>

In Bulma, you have got the class .is-flex to achieve the same.

Maintenance answered 23/4, 2017 at 9:54 Comment(3)

Thank you for effort, though I'm displaying mentioned columns in another column and also have few rows of those columns, so it's breaks stuff. See this: codepen.io/anon/pen/XRKyed Documentation unfortunately doesn't mention it :( – Manas 23/4, 2017 at 10:38

@J.Baptiste Well, that was not in the initial question and changes things dramatically. Accept this answer, if it solve your initial question, and then post a new one with your new requirements. – Maintenance 23/4, 2017 at 10:44

thanks again, question added: #43570751 – Manas 23/4, 2017 at 10:57

I know it's a bit late, but maybe someone who looks for similar solution will find my answer helpful.

You can use Bulma's Tile system to get something that will behave like equal height columns.

<div class="tile is-ancestor">
  <div class="tile is-horizontal">
    <div class="tile is-parent">
      <div class="tile is-child">
        <!--Content here-->
      </div>
    </div>
    <div class="tile is-parent">
      <div class="tile is-child box">
        <!--Content here-->
      </div>
    </div>
  </div>
</div>

No additional css needed. You can also specify horizontal size of columns using is-1 - is-12 classes. Check this pen to see this in action

Penetrating answered 3/12, 2018 at 21:14 Comment(1)

unfortunately updating your pen's dependencies to bulma 1.0.1 breaks it. – Lothario 25/5 at 6:46

This did the trick for me.

<div class="column">
    <section class="section1">
    ...
    </section>
</div>

.section1 {
  height: 100%;
}

Discoloration answered 20/10, 2019 at 23:3 Comment(0)

This works fine for me with this code:

<div class="columns">
    <div class="column my-class">
        one thing
    </div>
    <div class="column my-class">
        many other <br><br><br> etc. things
    </div>
</div>

<style>
.column.my-class {
    display: inline-flex; 
}

.column.my-class > div {
    width: 100%; // only Edge needed this nonsense
}
</style>

Worked in Chrome 61.0.3163.100 (of course), Edge 40.15063.674.0, Firefox 57.0.

Kwapong answered 14/11, 2017 at 22:25 Comment(0)

align-items: stretch http://cssreference.io/flexbox/

.columns {
    flex-wrap: wrap;
    align-items: stretch;
}

Ref: https://github.com/jgthms/bulma/issues/696

Conductive answered 27/8, 2017 at 11:57 Comment(2)

This does not apply to the question. It was asked for a markup with only one columns. For this solution you need at least two columns as written in your linked docs. – Snowflake 16/10, 2017 at 20:54

I am also answering to titles that closely match. I was searching for it and Google and StackOverFlow gave me this question only. It would have been good if someone else has answered mine. So I did it. Maybe it would help someone like me. – Conductive 17/10, 2017 at 5:10

I noticed that making .column as flex broke the layout.

I solved with the following CSS rule, this way I can use the class .is-equal-height if I want aligned columns.

.columns.is-equal-height > .column > * {
    height: 100% !important;
}

Amaryl answered 5/1, 2023 at 12:26 Comment(0)

Recommended topics

Hot tags