Flexbox "align-items : center" shrinks a child's max-width

user_6027430 0
Viewed 9238

I have a flexbox div container with align-items: center, with three childs. One of them has max-width: 200px (in the code, second-ch), and it's also a flex with two childs distributed with justify-content: space-between, but second-ch is not following its max-width. If I remove align-items: center from container, second-ch takes again the width desired but the remaining elements are not in the center anymore. How can I solve that?

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.first-ch {
  width: 70px;
  height: 70px;
  background-color: grey;
}

.second-ch {
  max-width: 200px;
  height: 80px;
  background-color: red;
  display: flex;
  justify-content: space-between;
}
  .square {
    width: 50px;
    height: 50px;
    background-color: yellow;
    margin: 5px;
  }
.third-ch {
  width: 50px;
  height: 50px;
  background-color: blue;
}
<div class="container">
  <div class="first-ch"></div>
  <div class="second-ch">
    <div class="square"></div>
    <div class="square"></div>
  </div>
  <div class="third-ch"></div>
</div>

flexbox css html
4 Answers

Citing the comment of Jason Deppen:

I solved it by also setting width: 100% along with my max-width value.

max-width: <your max width>;
width: 100%;
user_35226830

I know this is old but for anyone reading this:

Using align-self: stretch; on the child element will also work :)

So in this case:

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

...

.second-ch {
  max-width: 200px;
  align-self: stretch;
  ...
}

...
user_64371020
Related