Bulma flexbox column falling of page

Bulma flexbox column falling of page

我正在创建一个简单的 2 列布局。左边的栏应该是窄的并且包含一个垂直的导航栏，右边的栏将包含网站的主要内容。我正在使用 bulma-css 列来创建此布局。

我遇到的问题是，根据水平 windows 大小，第二列右侧的一部分从页面上脱落。因此此列未适当缩放。

下面是一个说明问题的最小示例。根据 window 大小，按钮将（部分）从屏幕上掉下来。

<!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>

良好的预期行为：

差：

实际上问题是你的 .container class 在第二列中有一个 width...更好或删除它并使用 .is-one-third class 在第一列中使其变小或其他 [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>