html - 使两个 flex 元素各占父级的 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 的 flex 元素，每个将占 25%。三将占33.33%。两个 flex 元素将占 50%。这与内容数量无关。

参见此图:DEMO

---

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

您有一个主容器，其高度:400px。您还有一个规则，即在您的 div 周围添加 10px 的内边距。这会为每个 div 添加 20px 的高度。您还有一个带有 height: 2em 的 header 。

当您考虑额外的高度时，布局会起作用。

尝试这些调整:

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/