ether ether - 2 years ago 98
HTML Question

Unable to have a static height in flexbox?

I have a 2-column layout with a tabber on the right. Upon adding content to my left hand, I gained a ton of extra height and now my tabber is a little bent out of shape.

Does flexbox restrict height? It behaves very oddly by making the navigation buttons on the tabber super tall. Any ideas? Fiddle

Code that I added

<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

-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;

Answer Source

An initial setting of a flex container is align-items: stretch. This means that child elements will automatically expand to cover the full available length of the container.

When you add content to your left column (a flex item), it expands the height of the container. The right column (another flex item) will, because of align-items: stretch, track the height of its sibling.

This is a key feature of flexbox: equal height columns.

Because the right column is a flex item and, per your code, also a flex container, its children (the tabs) stretch, as well.

You can override this default setting with align-items: flex-start.

Adjust the primary flex container:

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

Revised Fiddle


Adjust the nested flex container (the right column):

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

Revised Fiddle

More details:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download