Flex items don't have the same width

Question

Basically, I'm trying to make all blue boxes the same width and height regardless of the content inside them. Any help is greatly appreciated.

.icon-tiles {
  margin: 0;
  padding: 0;
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}

.tile-node {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1 33.33333%;
          flex: 1 33.33333%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 2rem;
}

.tile-node__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}


.tile-node__link {
  background-color: #4d8acc;
  padding: 2rem;
  flex: 1 1 0;
}

<ul class="icon-tiles">
    <li class="tile-node">
        <a href="#" class="tile-node__link">
            <div class="tile-node__content tile-node__content--calendar">
                <span class="tile-node__text">My Link One</span>
            </div>
        </a>
    </li>
    <li class="tile-node">
        <a href="#" class="tile-node__link">
            <div class="tile-node__content tile-node__content--bus">
                <span class="tile-node__text">Link two</span>
            </div>
        </a>
    </li>
    <li class="tile-node">
        <a href="#" class="tile-node__link">
            <div class="tile-node__content tile-node__content--map">
                <span class="tile-node__text">Another link</span>
            </div>
        </a>
    </li>
    <li class="tile-node">
        <a href="#" class="tile-node__link">
            <div class="tile-node__content tile-node__content--essentials">
                <span class="tile-node__text">Another one</span>
            </div>
        </a>
    </li>
    <li class="tile-node">
        <a href="#" class="tile-node__link">
            <div class="tile-node__content tile-node__content--reminder">
                <span class="tile-node__text">New link twooooo</span>
            </div>
        </a>
    </li>
    <li class="tile-node">
        <a href="#" class="tile-node__link">
            <div class="tile-node__content tile-node__content--book">
                <span class="tile-node__text">Link three</span>
            </div>
        </a>
    </li>
</ul>

I don't want them to be restricted by a width as the content will be dynamically added. — Jayonline, Dec 19 '18 at 14:08
please focus on the problem instead of telling your personnal story ... we simply need details about your issue not yourself — Temani Afif, Dec 19 '18 at 14:12
I am afraid that it's not possible with pure CSS, as flex-items are not aware of their siblings' size. You can use JS to achieve this. https://stackoverflow.com/questions/31159732/every-item-to-have-the-same-width-as-the-widest-element — Mike, Dec 19 '18 at 14:15
All blue boxes of same width and height where content will be dynamically added? Try this in your `script` tag. Add `onChange` listener for all elements, make a common function which compares width of all ` elements` and thereafter changes the width accordingly `onChange` — Alwaysblue, Dec 19 '18 at 14:17
Thanks Michael_B for the explanation - that does make a lot of sense! — Jayonline, Dec 19 '18 at 16:03

score -1 · Answer 1 · edited Dec 19 '18 at 15:00

I think this will work for you, please check demo snippet

.icon-tiles {
  margin: 0;
  padding: 0;
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}

.tile-node {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1 33.33333%;
          flex: 1 33.33333%;

  padding: 2rem;
}

.tile-node__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}


.tile-node__link {
background-color: #4d8acc;
padding: 10px;
/* flex: 1; */
height: 84px;
overflow: hidden;
justify-content: center;
flex-direction: column;
display: flex;
}

<ul class="icon-tiles">
    <li class="tile-node">
        <a href="#" class="tile-node__link">
            <div class="tile-node__content tile-node__content--calendar">
                <span class="tile-node__text">My Link One My Link One My Link One My Link One</span>
            </div>
        </a>
    </li>
    <li class="tile-node">
        <a href="#" class="tile-node__link">
            <div class="tile-node__content tile-node__content--bus">
                <span class="tile-node__text">Link two</span>
            </div>
        </a>
    </li>
    <li class="tile-node">
        <a href="#" class="tile-node__link">
            <div class="tile-node__content tile-node__content--map">
                <span class="tile-node__text">Another link</span>
            </div>
        </a>
    </li>
    <li class="tile-node">
        <a href="#" class="tile-node__link">
            <div class="tile-node__content tile-node__content--essentials">
                <span class="tile-node__text">Another one</span>
            </div>
        </a>
    </li>
    <li class="tile-node">
        <a href="#" class="tile-node__link">
            <div class="tile-node__content tile-node__content--reminder">
                <span class="tile-node__text">New link twooooo</span>
            </div>
        </a>
    </li>
    <li class="tile-node">
        <a href="#" class="tile-node__link">
            <div class="tile-node__content tile-node__content--book">
                <span class="tile-node__text">Link three</span>
            </div>
        </a>
    </li>
</ul>

Thanks for this Rahul, but the problem is that I don't want the outer box to have the same width as the anchor tag. — Jayonline, Dec 19 '18 at 14:40

score -1 · Answer 2 · answered Dec 19 '18 at 14:40

-1

Just add the following to your CSS class .tile-node__link and it will work as given below:

.tile-node__link {
    width: 100%;
    line-height: 6rem;
}

and remove padding: 2rem from this class.

I hope this was helpful.

answered Dec 19 '18 at 14:40

Code_Ninja

1,729
1
14
38

Flex items don't have the same width

2 Answers2