Гибкие элементы не имеют одинаковую ширину

Question

По сути, я пытаюсь сделать все синие поля одинаковой ширины и высоты независимо от содержимого внутри них.Любая помощь очень ценится.

.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>

Answer 1

Вот решение с равной высотой и шириной элемента, но все они - братья и сестры - как было сказано в комментариях выше.Я предполагаю, что в вашем решении установка ширины обязательна.http://jsfiddle.net/heaversm/qbdov012/

body {
    display: -webkit-flex;
    -webkit-flex-flow: column wrap;
    -webkit-align-items: center;
}

ul {
    display: -webkit-flex;
    margin: 0 20px;
    max-width: 800px;
}
li {
    -webkit-flex: 1 0 0px;
    background-color: #eee;
    padding: 20px;
    overflow: hidden;
}
li:nth-child(even) {
    background-color: #ccc;
}

<ul>
    <li>Little content.</li>
    <li>Moderate content. Moderate content. Moderate content.</li>
    <li>Much content. Much content. Much content. Much content. Much content. Much content. Much content. Much content. Much content. Much content. Much content. Much content.</li>
</ul>

Answer 2

Просто добавьте следующее в ваш класс CSS .tile-node__link, и оно будет работать, как указано ниже:

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

и удалите padding: 2rem из этого класса.

Я надеюсь, что это былополезно.

Answer 3

Я думаю, что это будет работать для вас, пожалуйста, проверьте демонстрационный фрагмент

.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>