How to make flexbox item size equal?

Question

I am beginner in css. i am tried to use CSS flexbox item equal size but it didnt work. I found same question on stackoverflow those answer not resolve my problem.

.container {
  display: flex;
}

.flx {
  text-align: center;
  color: #fff;
  flex: 1;
}

.flx:nth-child(1) {
  background-color: green;
}

.flx:nth-child(2) {
  background-color: red;
}

.flx:nth-child(3) {
  background-color: blue;
}

.flx:nth-child(4) {
  background-color: aqua;
}

<div class="container">
  <div class="flx">
    alsldkj;lasdfj;l;asf
  </div>
  <div class="flx">
    asd
  </div>
  <div class="flx">
    asdfasdlfja;lsdfj;lasdfaasdfasdfasdfasdfasdfasdfasdfsadfasdfasdfasdfasdf>alsdflasdflasldjflasdjffla<br />sdjfalsdjfasdf
    <br /> asdfasdlfja;lsdfj;lasdfaasdfasdfasdfasdfasdfasdfasdfs
    <br />adfasdfasdfasdfasdf>alsdflasdflasldjflasdjfflasdjfalsdjfasdf
    <br />
  </div>
  <div class="flx">
    asfdasdfasdfasasf
  </div>
</div>

if you add `overflow:auto;` or avoid funny long words, it would https://codepen.io/anon/pen/JJQKVb or break word /hide overflow https://codepen.io/anon/pen/pwXbBX — G-Cyrillus, Jul 19 '17 at 05:40

Maniraj Murugan · Accepted Answer · 2017-07-19T06:01:59.363

You just add overflow-x:auto to your class flx.. Below is the working snippet..

.container {
 display: flex;
}
.flx {
 
 text-align: center;
 color: #fff;
 flex: 1;
 overflow: auto;
}

.flx:nth-child(1) {
 background-color: green;
}

.flx:nth-child(2) {
 background-color: red;
}

.flx:nth-child(3) {
 background-color: blue;
}

.flx:nth-child(4) {
 background-color: aqua;
}

<div class="container">

 <div class="flx">
  alsldkj;lasdfj;l;asf
 </div>
 <div class="flx">
 asd
 </div>
 <div class="flx">
 asdfasdlfja;lsdfj;lasdfaasdfasdfasdfasdfasdfasdfasdfsadfasdfasdfasdfasdf>alsdflasdflasldjflasdjffla<br />sdjfalsdjfasdf
 <br />
 asdfasdlfja;lsdfj;lasdfaasdfasdfasdfasdfasdfasdfasdfs<br />adfasdfasdfasdfasdf>alsdflasdflasldjflasdjfflasdjfalsdjfasdf
 <br />
 </div>
 <div class="flx">
 asfdasdfasdfasasf
 </div>
 
 
</div>

score 0 · Answer 2 · answered Jul 19 '17 at 05:57

<!-- hi Check this.. i am not sure this answer may help you.. add max-width of div -->

    .container {
      display: flex;
    }

    .flx {
      text-align: center;
      color: #fff;
      flex: 1;
  max-width:100px;
  width:100%;
    }

    .flx:nth-child(1) {
      background-color: green;
    }

    .flx:nth-child(2) {
      background-color: red;
    }

    .flx:nth-child(3) {
      background-color: blue;
    }

    .flx:nth-child(4) {
      background-color: aqua;
    }

.flx:nth-child(5) {
  background-color: orange;
}
.flx:nth-child(6) {
  background-color: yellow;
}

    <div class="container">
      <div class="flx">
        alsldkj;lasdfj;l;asf
      </div>
      <div class="flx">
        asd
      </div>
      <div class="flx">
        asdfasdlfja;lsdfj;lasdfaasdfasdfasdfasdfasdfasdfasdfsadfasdfasdfasdfasdf>alsdflasdflasldjflasdjffla<br />sdjfalsdjfasdf
        <br /> asdfasdlfja;lsdfj;lasdfaasdfasdfasdfasdfasdfasdfasdfs
        <br />adfasdfasdfasdfasdf>alsdflasdflasldjflasdjfflasdjfalsdjfasdf
        <br />
      </div>
      <div class="flx">
        asfdasdfasdfasasf
      </div>
<div class="flx">
    asfdasdfasdfasasf
  </div>
   <div class="flx">
    asfdasdfasdfasasf
  </div>
    </div>

How to make flexbox item size equal?

2 Answers2