Text not breaking inside of flexbox

Question

for some reason the text inside a flex container is not breaking correctly when the horizontal area is too small to display. But even in the "normal" state it should then also not break?

what did I do wrong here?

(function () {
    var el;
    el = document.getElementById('clicker');
    el.onclick = function () {
        el.classList.toggle('container_changed');
        return null;
    };
}.call(this));

body {
  background: #333;
}

.container {
  width: 100px;
  position: relative;
}
.container img {
  width: 100%;
  height: auto;
}
.container .caption {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  vertical-align: middle;
}
.container span {
  color: white;
  font-family: 'Nobile', sans-serif;
  font-size: 1em;
  text-align: right;
}

.container_changed {
  height: 200px;
  width: 200px;
}
.container_changed img {
  width: initial;
  height: 100%;
}

<div id="clicker" class="container">
  <img src="http://www.placebear.com/300/800">
  <div class="caption">
    <span>Ceci n'est pas un ours</span>
  </div>
</div>

Your container is 100px wide before click and 200px after: behaviour seems fine to me; add outline around flex container and flex item(s) or flashy backgrounds below if you want to be sure. Also why is there an image here? It's a siblng of your flex container (thus unrelated to it) — FelipeAls, Mar 22 '16 at 14:23

score 1 · Answer 1 · edited Mar 22 '16 at 21:04

Adding some flashy debugging colors to your code:

Your flex container is the translucid slateblue background (sibling of the ours ours image :) )
Your flex item is the span containing text.

(just in case) Despite its class name, .container isn't your flex container here. It's .caption. And span is the only flex item here.

You can see that if the text is longer, it still wraps after click because the flex container is 200px wide and your text occupies more than that.

If you're new to flexbox, the ultimate chetsheet is on CSS Tricks. Wait, you'll still find it useful even if not new :)

(function () {
    var el;
    el = document.getElementById('clicker');
    el.onclick = function () {
        el.classList.toggle('container_changed');
        return null;
    };
}.call(this));

body {
  background: #333;
}

.container {
  width: 100px;
  position: relative;
}
.container img {
  width: 100%;
  height: auto;
}
.container .caption {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  vertical-align: middle;
  background: rgba(106,90,205, 0.7); /*slateblue*/
}
.container span {
  color: white;
  font-family: 'Nobile', sans-serif;
  font-size: 1em;
  text-align: right;
  background: tomato;
}

.container_changed {
  height: 200px;
  width: initial;
}
.container_changed img {
  width: initial;
  height: 100%;
}

<div id="clicker" class="container">
  <img src="http://www.placebear.com/300/800">
  <div class="caption">
    <span>Ceci n'est pas un ours (also click me!)</span>
  </div>
</div>

Hello and thanks for the color-magic and the link :) However the text still does not break correctly. I edited the code also, because, i made a mistake when copying It was supposed to be: .container_changed { height: 200px; width: initial; } so the whole thing adjusts to the image size. I am also aware of the fact, that .container is not the flex-container. It is semantically my container for the complete thumbnail with caption and all. So .caption is supposed to be the flex-container. Hmm what now, I say. ( CSS is really not my forte ... ) — zantafio, Mar 22 '16 at 19:11

score 0 · Answer 2 · answered Mar 22 '16 at 12:58

0

Change the width of .container_changed in your css like that:

.container_changed {
    height: 200px;
    width: 75px;
}

answered Mar 22 '16 at 12:58

Ahmed

1,666
17
23

thanks, but ah. i should have mentioned: in the end version, this code should work dynamically with images of various proportions. so setting the with manually will not help. – zantafio Mar 22 '16 at 13:34

Text not breaking inside of flexbox

2 Answers2

Linked