使用Bulma实现等宽等高列时is-6与is-flex规则冲突如何解决？

问题根源 #

你遇到的样式冲突来自自定义规则和Bulma原生布局规则的优先级冲突，核心有三点：

• Bulma 中 .columns 容器默认就是 flex 布局，其内部的 .column 原生就支持等高效果，不需要手动给 .column 加 is-flex 类，手动添加后会覆盖 .is-6 类的 flex 宽度属性，导致宽度规则失效
• 你给 #visualCards .column 手动设置的 display: flex + height: 100% 规则破坏了 Bulma 列的默认 flex 计算逻辑
• .visualCard 同时使用了 .columns 类和自定义的 width: 100%，Bulma 的 .columns 默认自带负边距，手动设置100%宽度后会导致布局溢出，打断高度继承逻辑

修复方案 #

第一步：调整自定义CSS

删除冗余规则，只保留必要样式：

body, html {
  height: 100%;
  padding: 0!important;
}

body {
    background-color: #e9ecef;
}

.nav {
    height: 50px;
    margin-bottom: 50px;
    background-color: #42b983;
}

.visualCard {
    background-color: white;
    border-radius: 8px;
    height: 100%;
}

第二步：调整HTML结构

去掉不必要的is-flex类，利用Bulma原生布局规则：

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>jQquery sortable lists example</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
</head>
<body>    
<div class="nav"></div>
  <div class="container">
        <div id="visualCards" class="columns">
            <div class="column is-6">
                    <div class="columns visualCard is-gapless">
                        <div class="column is-3">
              aaaa aaa aaaa aaa aaa aaa aaaa aaaa
            </div>
                        <div class="column is-8">
              bbbbb bbb bbbb bbbb bbb bbb bbb bbb
            </div>
                    </div>
            </div>
            <div class="column is-6">
                    <div class="columns visualCard is-gapless">
                        <div class="column is-3">
              aaaa aa aaaaaa
            </div>
                        <div class="column is-8">
              bbbb bb bbbbb bb
            </div>
                    </div>
            </div>
        </div>
  </div>    
</body>
</html>

修改后即可同时实现两列等宽、等高，卡片撑满列高度的效果。

内容的提问来源于stack exchange，提问作者Čamo