Search code examples
cssflexboxbulma

Bulma flexbox column falling of page

I'm creating a simple 2 column layout. The left column should be narrow and contains a vertical navigation bar, the right column will contain the main content of the site. I'm using bulma-css columns to create this layout.

The problem that I'm encountering is that depending on the horizontal windows size, part of the right side of the second column is falling off the page. So this column is not scaling appropriately.

Below is a minimal example that illustrates the problem. Depending on window size the button will (partially) fall off the screen.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">
</head>

<body>
<div class="columns">
    <div class="column is-narrow">
        <p>aaaaaaaaaaaaaaaaa</p>
    </div>
    <div class="column">
        <div class="container">
            <p class="button is-primary is-pulled-right">button</p>
        </div>
    </div>
</div>
</body>

Good expected behaviour:

enter image description here

Bad:

enter image description here

Solution

  • Actually the problem is your .container class in the second column which has a width...better or remove it and use .is-one-third class in the first column to make it smaller or other [bulma grid column classes]

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">
<div class="columns is-mobile">
  <div class="column is-one-third">
    <p>aaaaaaaaaaaaaaaaa</p>
  </div>
  <div class="column">
    <p class="button is-primary is-pulled-right">button</p>
  </div>
</div>