制作两个弹性项目，每个父项的高度为50％

Question

我正在使用css flex布局来构建一个仪表板，并希望在Flex项目中放置两个小部件（一个在另一个之上），并使它们始终保持50％的父级高度（无论内容如何） 。所以，如果我的HTML是：

<div class="flex-container">
  <div class="flex-item">
    <div class="widget" id="w1">
      widget 1 content
    </div>
    <div class="widget" id="w2">
      widget 2 content
    </div>
  </div>
</div>

和我的css看起来像：

.flex-container {
  display: flex;
  flex-direction: column;
}
.flex-item {
  flex: 1;
}

如何让两个.widget始终占据.flex-item的50％高度？

我试过了：

.flex-item {
  flex: 1;
  display: flex;
}
.widget {
  flex: 1;
}

但这只适用于两个小部件中的内容相同的情况。

为了更好地说明我的问题，我进行了更多的elaborate jsfiddle。

提前致谢！

Answer 1

当您说flex: 1 仅在两个小部件中的内容相同时才有效，这是不正确的。这会破坏flex: 1的目的。

flex: 1告诉flex项目在它们之间平均分配容器空间。如果有flex: 1的四个弹性项目，则每个项目将占25％。三人占33.33％。两个弹性项目将占50％。无论内容数量是，都是。

请参阅此插图：DEMO

您在问题中发布的代码中不清楚您遇到的问题。但是，这在您的小提琴演示中很明显。

您有一个height: 400px的主容器。你还有一个规则为你的div添加10px填充全能。这为每个div增加了20px的高度。您还有一个标题height: 2em。

当您考虑到布局的额外高度时。

尝试以下调整：

HTML （无更改）

<强> CSS

div {
    box-shadow: inset 0 0 0 1px rgba(30, 100, 200, 0.5);
    padding: 10px;                    /* sneaky villain */
    font-family: arial;
}

h1, p { margin: 0; }

#main-wrapper {
    height: 400px;                    /* primary height */
    display: flex;
    flex-direction: column;
}

#header {
    flex-shrink: 0;
    height: 2em;                      /* header height */
}

#main-column-wrapper {
    flex: 1;
    display: flex;
    flex-direction: row;
    height: calc(100% - 2em - 20px);  /* primary height - header height - padding */
}

#side-column {
    width: 20%;
    flex-shrink: 0;
}

#main-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: calc(100% - 40px);      /* main-column-wrapper height - padding (2 divs) */
}

#widget1,
#widget2 {
    flex: 1;
    flex-shrink: 0;
    overflow: auto;
}

Revised Fiddle

另一种选择是使用box-sizing: border-box来调整填充。点击此处了解详情：https://css-tricks.com/box-sizing/