CODEWITHSUNDEEP
htmlcssflexbox
knocked loose
knocked loose

Reputation: 3314

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

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

Upvotes: 2

Views: 418

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371699

An initial setting of a flex container is align-items: stretch. This means that child elements will automatically expand to fill the 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 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 the 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

OR

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:

Upvotes: 3

Related Questions