Menu
The problem is fully illustrated by this minimal example on codepen
To restate however: the Bulma CSS framework provides a columns container and a modal element. If one is placed inside the other, as in the following complete code:
<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>Then the .columns element takes the width of the parent, but the .column s inside it overflow the modal to the right.
Does anyone know why this is and how to stop it happening? It's a flexbox issue for sure, but CSS is not really my domain. Any comments about what information is needed to make this question more generally applicable (in terms of the css used inside the Bulma framework) are welcome.
855
The reason is that a block like element, as e.g. display: flex is, it won't grow larger than its parent, hence cause this overflow.
If you make the #my-columns to be inline-flex it will work, using is-inline-flex.
Stack snippet
#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>Another option would be to make it break line, using is-multiline
Stack snippet
#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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
