Flexbox evenly sized elements regardless of contents

Question

You are using flex-grow: 1. That means that the initial width of the flex items will be the width of its content, and then the available space will be distributed equally.

However, you want the flex items to have the same width, so you want to ignore the width of their content. You can achieve this with

flex: 1;

Additionally, Flexbox introduces auto as the initial value of min-width. This might produce different widths in some cases, so to be safe better add min-width: 0 or set overflow to anything but visible

body,
html {
  height: 100%;
}
body {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
body > div {
  display: flex;
}
body > div > div {
  border: solid 1px blue;
}
div {
  flex: 1;
  min-width: 0;
}
body > div:nth-child(2) > div:nth-child(2) {
  display: flex;
  align-items: center;
  justify-content: center;
}

<div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div>
  <div></div>
  <div><span>contains span</span></div>
  <div></div>
</div>
<div>
  <div></div>
  <div></div>
  <div></div>
</div>

Leave a Comment Cancel reply