I'm trying to get an item in a flexbox layout to fill all available space inside the container if it can, or be centered if it can't due to its max-width/max-height constraints. In the snippet below, it works like I want along the main axis, but not along the cross axis. When using align-items: center, the item is centered, but has minimum size. With align-items: stretch it has maximum size, but is no longer centered. How do I make it work? I'd prefer to avoid additional html elements.

.container {
  background: blue;
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* align-items: stretch; */
}

.item {
  flex: 1;
  background: red;
  min-width: 20px;
  min-height: 20px;
  max-width: 100px;
  max-height: 100px;
}

<div class="container">
  <div class="item"></div>
</div>

I'm trying to get an item in a flexbox layout to fill all available space inside the container if it can, or be centered if it can't due to its max-width/max-height constraints. In the snippet below, it works like I want along the main axis, but not along the cross axis. When using align-items: center, the item is centered, but has minimum size. With align-items: stretch it has maximum size, but is no longer centered. How do I make it work? I'd prefer to avoid additional html elements.

.container {
  background: blue;
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* align-items: stretch; */
}

.item {
  flex: 1;
  background: red;
  min-width: 20px;
  min-height: 20px;
  max-width: 100px;
  max-height: 100px;
}

<div class="container">
  <div class="item"></div>
</div>

• html
• css
• flexbox

Share Improve this question Follow asked Mar 12 at 16:25 yuri kilochekyuri kilochek 13.6k22 gold badges3333 silver badges6363 bronze badges 3

• Add height: 100px to .item. – zer00ne Commented Mar 12 at 16:34
• Do you mean something like align-self: stretch that would align item along cross-axis? If so, pl see this link for more help: developer.mozilla./en-US/docs/Web/CSS/align-self – SoftwareDveloper Commented Mar 12 at 18:30
• @SoftwareDveloper align-self is a more granular way to say align-items on the container. It exhibits the same issue. – yuri kilochek Commented Mar 12 at 18:40

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 1

I would define the size differently:

.container {
  background: blue;
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  
  /* resize the container to debug*/
  resize: both;
  overflow: hidden;
}

.item {
  width: clamp(20px, 100%, 100px);
  height: clamp(20px, 100%, 100px);
  
  background: red;
  border: 2px solid green;
  box-sizing: border-box;
}

<div class="container">
  <div class="item"></div>
</div>

Keep align-items: center; and set height: 100%; on the .item:

.container {
  background: blue;
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item {
  height: 100%;
  flex: 1 1 100%;
  background: red;
  min-width: 20px;
  min-height: 20px;
  max-width: 100px;
  max-height: 100px;
}

<div class="container">
  <div class="item"></div>
</div>

Or use align-items: stretch; and center the .item with position: relative; top: 50%; translate: 0 -50%;:

.container {
  background: blue;
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: stretch;
}

.item {
  position: relative;
  top: 50%;
  translate: 0 -50%;
  
  flex: 1;
  background: red;
  min-width: 20px;
  min-height: 20px;
  max-width: 100px;
  max-height: 100px;
}

<div class="container">
  <div class="item"></div>
</div>

It's already centered the only issue is that it's not at full height. Setting max-height isn't going to bring .item height to max especially since it has no content. Setting the height explicitly will.

.item {
  ...
  height: 100px;
}

.container {
  background: blue;
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* align-items: stretch; */
}

.item {
  flex: 1;
  background: red;
  min-width: 20px;
  min-height: 20px;
  max-width: 100px;
  max-height: 100px;
  height: 100px;
  /* That's all that's needed */
}

<div class="container">
  <div class="item"></div>
</div>