word-wrap inside flexbox not working

Question

I'm using flexbox, each item consists of picture and text under it. I need to make all pictures same height (width may vary) and text to wrap so it doesn't extend items.

But I managed to enable word-wrap only with justified width, not height.

Note: I need to justify images, not items.

 .wrapper1, .wrapper2 { display: flex; justify-content: center; flex-wrap: wrap; } .flex-item { margin: 5px; background-color: #ddd; } .wrapper1 .flex-item { width: 150px; } .flex-item p:last-child { margin-bottom: 0; } .card-image { width: 100%; } .card-body { padding: 7px; word-wrap: break-word; } .wrapper2 .flex-item { width: auto; } .wrapper2 .card-image { height: 231px; width: auto; } 

 <div class="wrapper1"> <div class="flex-item"> <a href="/comics/novathekeep" title="Нова: Цитадель"><img src="http://warcry.ru/comics/pages/thumb/51.jpg" class="card-image" /></a> <div class="card-body"> <p><a href="/comics/novathekeep">Нова: Цитадель</a></p> </div> </div> <div class="flex-item"> <a href="/comics/artanissacrifice" title="Артанис: Великая жертва"><img src="http://warcry.ru/comics/pages/thumb/303.jpg" class="card-image" /></a> <div class="card-body"> <p><a href="/comics/artanissacrifice">Артанис: Великая жертва</a></p> </div> </div> <div class="flex-item"> <a href="/comics/kerriganhopeandvengeance" title="Керриган: Надежда и мщение"><img src="http://warcry.ru/comics/pages/thumb/41.jpg" class="card-image" /></a> <div class="card-body"> <p><a href="/comics/kerriganhopeandvengeance">Керриган: Надежда и мщение</a></p> </div> </div> </div> <div class="wrapper2"> <div class="flex-item"> <a href="/comics/novathekeep" title="Нова: Цитадель"><img src="http://warcry.ru/comics/pages/thumb/51.jpg" class="card-image" /></a> <div class="card-body"> <p><a href="/comics/novathekeep">Нова: Цитадель</a></p> </div> </div> <div class="flex-item"> <a href="/comics/artanissacrifice" title="Артанис: Великая жертва"><img src="http://warcry.ru/comics/pages/thumb/303.jpg" class="card-image" /></a> <div class="card-body"> <p><a href="/comics/artanissacrifice">Артанис: Великая жертва</a></p> </div> </div> <div class="flex-item"> <a href="/comics/kerriganhopeandvengeance" title="Керриган: Надежда и мщение"><img src="http://warcry.ru/comics/pages/thumb/41.jpg" class="card-image" /></a> <div class="card-body"> <p><a href="/comics/kerriganhopeandvengeance">Керриган: Надежда и мщение</a></p> </div> </div> </div> 

Fiddle

First flexbox has items with same width (word-wrap works), second flexbox has items with same height (word-wrap doesn't work).

Answer 1

You have to assign max-width or flex-basis property

.wrapper2 .flex-item {
    flex: 0 1 150px;
}

or

.wrapper2 .flex-item {
    max-width: 150px;
}

Answer 2

This will work for you I think, give a try and let me know.

.wrapper2 .card-image {
    height: 231px;
}

check this fiddle