html - 无法在 flexbox 中设置静态高度？

Question

我有一个 2 列布局，右侧有一个制表符。在我的左手上添加内容后，我的高度增加了很多，现在我的手腕有点 flex 变形了。

flexbox 限制高度吗？通过使 tabber 上的导航按钮超高，它的行为非常奇怪。有任何想法吗？ <强> Fiddle

我添加的代码

<div class="course-duties">Course Responsibilities</div>
<div class="professor_responsibilities"> {{ widget_data.course_responsibilities_0.value }}</div>
<div class="professor_responsibilities"> {{ widget_data.course_responsibilities_1.value }}</div>
<div class="professor_responsibilities"> {{ widget_data.course_responsibilities_2.value }}</div>

Tabs Head/Body CSS

.tabs__head{
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
    padding: 27px 0;
    text-align: center;
    font-size: 1.2em;
    text-transform: uppercase;
    letter-spacing: 1.3px;
    color: #585858;
    border-bottom: #BBB 3px solid; 
    border-right: #BBB 1px solid;
  }

.tabs__body {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 100%;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2;
      background-color: white;
  padding: 20px;
  min-height: 320px;
  max-height: 410px;
  overflow: auto;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
    display:block;
  }

Answer 1

flex 容器的初始设置是align-items: stretch。这意味着子元素将自动扩展以填充容器的长度。

当您向左列( flex 元素)添加内容时，它会扩展容器的高度。右列(另一个 flex 元素)将跟踪其兄弟元素的高度。

这是 flexbox 的一个关键特性:等高列。

因为右列是一个 flex 元素，并且根据您的代码，也是一个 flex 容器，所以它的子项(选项卡)也会拉伸(stretch)。

您可以使用 align-items: flex-start 覆盖默认设置。

调整主 flex 容器:

.master-bio-container {
    max-width: 1090px;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    padding: 15px;
    align-items: flex-start;   /* NEW */
}

Revised Fiddle

或

调整嵌套的 flex 容器(右列):

.professor__tabs {
    display: flex;
    flex-flow: row wrap;
    align-items: flex-start;      /* NEW */
}

Revised Fiddle

更多详情:

• How to disable equal height columns in Flexbox?
• 8.3. Cross-axis Alignment: the align-items and align-self properties