ServiceNow服务门户Flexbox

Question

我们的团队正在ServiceNow中创建一个服务门户页面，并且遇到了与flexboxes格式化的问题。我们有一个容器，其中一行有三列，每列都包含一个小部件。目前，它看起来像这样：

我们希望所有三个小部件的高度和宽度相同。您可以看到Maps和Youtube小部件的大小完全相同，但左侧的Open任务小部件不会展开以填充空间。以下是我定义类的方法：

.wrap {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
}

.wrap_item {
  background-color: yellow;
  border: black 1px solid;
  padding: 10px;
  display: flex;
  flex-direction:column;
}

看起来wrap和wrap_items正常工作，因为黄色部分扩展了整个空间，但由于某种原因，我无法获得Open Task小部件本身来填充整个空间。

Map和Youtube小部件包含在引导响应式代码中：<div class="content embed-responsive embed-responsive-16by9">

Open Tasks小部件的代码如下所示：

<div id="something" class="{{::c.options.class_name}} wrapper label-{{::c.options.color}}" ng-if="c.options.table">  
    <a ng-href="?id={{::c.options.sp_page_dv}}&table={{::c.options.table}}&filter={{::c.options.filter}}">
        <h1><i class="fa fa-{{::c.options.glyph}}" aria-hidden="true" ></i>&nbsp;{{c.data.count}}</h1>
        <h3>{{::c.options.title}}</h3>
    </a>
</div>

.wrap_item #something {
  background-color: $white; 
  text-align: center;
}

我已经尝试了为div，body，html定义height = 100％的所有内容，但没有任何效果。关于如何纠正这个问题的任何想法？

谢谢！

@Michael_B，这就是它的样子（我在下面的一些文字中添加）

Answer 1

我在ServiceNow社区发布了这个问题，特拉维斯提供了一个非常彻底的答案：https://youtu.be/P_6Ywdx5RvM

Answer 2

flex框工作正常，你可以看到通过使用wrap_item类检查元素，但是你的小部件没有扩展，这是因为你的小部件和容器项之间有更多的节点。

一般来说，这将是一个跨度和一个div。但是这可能会在以后的某个版本中发生变化（不太可能）。

您必须让每个孩子都展示灵活性，直到您的小部件。

.wrap_item, .wrap_item > span, .wrap_item > span > div {
    display: flex;
    flex: 1 0 auto;
}

由于