如何使用 Bulma CSS Framework 防止列溢出模态

Question

充分说明了问题

不过要重申一下：Bulma CSS 框架提供了一个列容器和一个模态元素。如果一个放在另一个里面，如下完整代码：

<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hello Bulma!</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
  <script defer src="https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
</head>

<body>
  <div class="modal is-active">
    <div class="modal-background"></div>
    <div class="modal-card">
      <header class="modal-card-head">
        <p class="modal-card-title">Modal title</p>
        <button class="delete" aria-label="close"></button>
      </header>
      <section class="modal-card-body">
        <div id="my-columns" class='columns is-mobile'>
          <div class='column'>
            <button class='button is-primary'>Some Button</button>
          </div>
          <div class='column'>
            <button class='button is-primary'>Some Button</button>
          </div>
          <div class='column'>
            <button class='button is-primary'>Some Button</button>
          </div>
          <div class='column'>
            <button class='button is-primary'>Some Button</button>
          </div>
          <div class='column'>
            <button class='button is-primary'>Some Button</button>
          </div>
          <div class='column'>
            <button class='button is-primary'>Some Button</button>
          </div>
        </div>
      </section>
      <footer class="modal-card-foot">
        <button class="button is-success">Save changes</button>
        <button class="button">Cancel</button>
      </footer>
    </div>
  </div>
</body>

</html>

然后.columns元素取了parent的宽度，但是里面的.columns向右溢出了modal

有谁知道这是为什么以及如何阻止它发生？这肯定是一个 flexbox 问题，但 CSS 不是我的领域。欢迎就使这个问题更普遍适用（就 Bulma 框架内使用的 css 而言）需要哪些信息提出任何意见。

Answer 1

原因是块状元素，例如display: flex 是，它不会长得比它的父级大，因此会导致溢出。

如果您将 #my-columns 设置为 inline-flex 它将起作用，使用 is-inline-flex.

堆栈片段

#my-columns {
  background-color: red;  
}

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello Bulma!</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
    <script defer src="https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
  </head>
  <body>
  <div class="modal is-active">
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">Modal title</p>
      <button class="delete" aria-label="close"></button>
    </header>
    <div class="modal-card-body">
      <div id="my-columns" class='columns is-mobile is-inline-flex'>
        <div class='column'>
          <button class='button is-primary'>Some Button</button>
        </div>
        <div class='column'>
          <button class='button is-primary'>Some Button</button>
        </div>
        <div class='column'>
          <button class='button is-primary'>Some Button</button>
        </div>
        <div class='column'>
          <button class='button is-primary'>Some Button</button>
        </div>
        <div class='column'>
          <button class='button is-primary'>Some Button</button>
        </div>
        <div class='column'>
          <button class='button is-primary'>Some Button</button>
        </div>
      </div>
    </div>
    <footer class="modal-card-foot">
      <button class="button is-success">Save changes</button>
      <button class="button">Cancel</button>
    </footer>
  </div>
</div>
  </body>
</html>

另一种选择是使用 is-multiline

使其断行

堆栈片段

#my-columns {
  background-color: red;  
}

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello Bulma!</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
    <script defer src="https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
  </head>
  <body>
  <div class="modal is-active">
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">Modal title</p>
      <button class="delete" aria-label="close"></button>
    </header>
    <div class="modal-card-body">
      <div id="my-columns" class='columns is-mobile is-multiline'>
        <div class='column'>
          <button class='button is-primary'>Some Button</button>
        </div>
        <div class='column'>
          <button class='button is-primary'>Some Button</button>
        </div>
        <div class='column'>
          <button class='button is-primary'>Some Button</button>
        </div>
        <div class='column'>
          <button class='button is-primary'>Some Button</button>
        </div>
        <div class='column'>
          <button class='button is-primary'>Some Button</button>
        </div>
        <div class='column'>
          <button class='button is-primary'>Some Button</button>
        </div>
      </div>
    </div>
    <footer class="modal-card-foot">
      <button class="button is-success">Save changes</button>
      <button class="button">Cancel</button>
    </footer>
  </div>
</div>
  </body>
</html>

如何使用 Bulma CSS Framework 防止列溢出模态

How to prevent columns overflowing modal with Bulma CSS Framework

html

css

flexbox

bulma