CODEWITHSUNDEEP
htmlcssflexbox
K Mehta
K Mehta

Reputation: 10553

Stretching items in a flexbox with a max-height

I have a div that has multiple items that I'm trying to display in a row. I want each item to grow to fit the available height. Though for one of the items, I want to set a max-height. Once the max-height is reached, I want it to be centered.

Here's a visualization of the desired behavior -

enter image description here

HTML:

<div class="parent">
  <div ...>Item 1</div>
  <div ...>Item 2</div>
  <div class="item3">Item 3</div>
</div>

CSS:

.parent {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.item3 {
  max-height: 90px;
}

This works as long as the parent container's height is 90px or less. Once the height exceeds 90px, Item 3 becomes top-aligned.

If I set align-items: center on .parent, that has the undesired effect of Item 3 "shrinking" to fit its content - that is, I still want it to grow to 90px when there's space.

The only "fixed" size I have is that Item 3 should not exceed 90px. All other heights are dynamic.

How would I go about doing this?

Edit: Clarification on heights being dynamic: The parent div's height is not set, so it grows to fit its "tallest" child.

Upvotes: 1

Views: 5772

Answers (1)

Hao Wu
Hao Wu

Reputation: 20953

You can give .item3 align-self: center and height: 100%.

It acts just like align-items: stretch when the height of the .parent is smaller than 90px

Edit

If the size of the parent is determined by its children, you may need to change your dom structure for .item3 to be a nested element, and style its child:

/* For resizing */
.parent {
  border: solid 3px blue;
  width: 280px;
}

.item1 {
  resize: vertical;
  overflow: auto;
}

/* End for resizing */
* {
  box-sizing: border-box;
}

.parent {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  position: relative;
}

.parent > * {
  flex: 1;
  border: solid 1px red;
}

.item3 {
  display: flex;
  align-items: center;
  position: relative;
}

.item3 > * {
  flex: 1;
  height: 100%;
  max-height: 90px;
  border: solid 1px green;
}
<div class="parent">
  <div class="item1">Item 1</div>
  <div>Item 2</div>
  <div class="item3">
    <div>Item 3</div>
  </div>
</div>

<h3>Resize it ↑ using bottom left corner</h3>

Upvotes: 2

Related Questions