Flex breadcrumbs: How to set equal height and break to new line

Question

I'm trying to build a flex based breadcrumb:

.flow-container {
  width: 300px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  padding: 10px;
  white-space: normal;
}

.card-text-info {
  color: white;
  padding: 10px 5px 10px 5px;
}

.flow-breadcrumb {
  width: 100%;
  list-style-type: none;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.flow-breadcrumb li {
  flex: 1;
  color: #fff;
  display: block;
  background: #f40c81;
  text-decoration: none;
  position: relative;
  line-height: 100%;
  padding: 0 10px 0 5px;
  text-align: center;
  margin-right: 23px;
}

.flow-breadcrumb li:nth-child(even) a:before {
  border-left-color: transparent;
}

.flow-breadcrumb li:first-child a {
  padding-left: 15px;
  border-radius: 4px 0 0 4px;
}

.flow-breadcrumb li:first-child a:before {
  border: none;
}

.flow-breadcrumb li:last-child a {
  padding-right: 15px;
  border-radius: 0 4px 4px 0;
}

.flow-breadcrumb li:last-child a:after {
  border: none;
}

.flow-breadcrumb li a:before,
.flow-breadcrumb li a:after {
  content: "";
  position: absolute;
  top: 0;
  border: 0 solid #f40c81;
  border-width: 20px 10px;
  width: 0;
  height: 0;
}

.flow-breadcrumb li a:before {
  left: -20px;
  border-left-color: transparent;
}

.flow-breadcrumb li a:after {
  left: 100%;
  border-color: transparent;
  border-left-color: #f40c81;
}

.flow-breadcrumb li a:hover {
  background: #7dd49a;
}

.flow-breadcrumb li a:hover:before {
  border-color: #7dd49a;
  border-left-color: transparent;
}

.flow-breadcrumb li a:hover:after {
  border-left-color: #7dd49a;
}

<div class="flow-container">
  <ul class="flow-breadcrumb">
    <li><a href="#">PROCESS 1</a></li>
    <li><a href="#"><span class="card-text-info" style="font-weight: normal; font-size: 12px;">RECEIVE DATA</span></a></li>
    <li><a href="#"><span class="card-text-info" style="font-weight: normal; font-size: 12px;">PROCESS REQUEST</span></a></li>
    <li><a href="#"><span class="card-text-info" style="font-weight: normal; font-size: 12px;">CHECK AGAINST QUALITY SPREADSHEET</span></a></li>
    <li><a href="#"><span class="card-text-info" style="font-weight: normal; font-size: 12px;">FILL THE STOCK REQUEST FORM ONLINE</span></a></li>
    <li><a href="#"><span class="card-text-info" style="font-weight: normal; font-size: 12px;">WAIT FOR ACCEPTANCE</span></a></li>
    <li><a href="#"><span class="card-text-info" style="font-weight: normal; font-size: 12px;">ASK FOR ITEM SHIPMENT</span></a></li>
    <li><a href="#"><span class="card-text-info" style="font-weight: normal; font-size: 12px;">WAIT FOR SHIPMENT CONFIRMATION</span></a></li>
    <li><a href="#"><span class="card-text-info" style="font-weight: normal; font-size: 12px;">ENTER SHIPMENT CODE TO TRACKING SYSTEM</span></a></li>
    <li><a href="#"><span class="card-text-info" style="font-weight: normal; font-size: 12px;">CHECK FOR DELIVERY</span></a></li>
  </ul>
</div>

In the given code, I need to:

a) Keep same height on all items, so the total breadcrumb item will be the size of the tallest item.

b) Be able to break in two or more lines if my width gets full (in the example 300px)

[EDIT]

Removed all heights, and now the content is overflowing the breadcrumbs.... I need the breadcrumbs to grown in height to fill content.

you are setting many height:100% in your code, all are useless and they are creating issues. Remove them and all your element will get stretched by default to have the same height — Temani Afif, Apr 29 '19 at 20:17
Thanks. Did it. Now I have another problem - the content is overflowing the breadcrumb height... I need it to grow the same height. — Mendes, Apr 29 '19 at 20:21
yes, they way you are defining the arrow isn't responsive .. let me find you a related question doing exactly the same — Temani Afif, Apr 29 '19 at 20:28
here you go : https://stackoverflow.com/a/48289185/8620333 you will find better way to create the arrow responsively (if you still face issue, I will elaborate an answer) — Temani Afif, Apr 29 '19 at 20:44
Also, please note that your requirement a) and b) can't be satisfied at the same time using just a flex layout, as once the breadcrumb starts to wrap, the height of items will be equal to the tallest in the current line (not in the whole flex container), see [this answer](https://stackoverflow.com/questions/36004926/equal-height-rows-in-a-flex-container) — Piotr Wicijowski, May 01 '19 at 14:17

Flex breadcrumbs: How to set equal height and break to new line

0 Answers0