Prevent text from being wider than an image in a flex container

Asked Jul 15 '19 at 22:38

Active Jul 15 '19 at 23:30

Viewed 228 times

I'm looking at this question. I can't solve my issue of text being wider than the image. I have extra markup that makes the row of containers responsive without media queries. How can I keep the text from being wider than the image?

.issues-columns {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.issue-col {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  flex: 0 0 200px;
  padding:5px;
}

.issue-col-text {
  flex: 1 1 auto;
  align-items: center;
}

<div class="issues-columns">

  <div class="issue-col">
      <img src="http://placekitten.com/200/200" />
    <div class="issue-col-text">Text text text Text text text Text text text</div>
  </div>

  <div class="issue-col">
    <img src="http://placekitten.com/200/200" />
    <div class="issue-col-text">Text text text</div>
  </div>

  <div class="issue-col">
    <img src="http://placekitten.com/200/200" />
    <div class="issue-col-text">Text text text</div>
  </div>
</div>

edited Jul 15 '19 at 23:30

asked Jul 15 '19 at 22:38

BlueDogRanch

2

you are using `flex-shrink: 0;`, you need to remove it – Temani Afif Jul 15 '19 at 22:42
Thanks, I edited my question, but that doesn't seem to help. – BlueDogRanch Jul 15 '19 at 22:59
I see no overflow now – Temani Afif Jul 15 '19 at 23:01
My mistake; I'm using the wrong terminology. I want to limit the text width to the width of the image; I guess the width of the container is wider than the image. Do I need to set the container width? – BlueDogRanch Jul 15 '19 at 23:16
Thanks, you should add your tips as an answer. – BlueDogRanch Jul 15 '19 at 23:34
Is flexbox mandatory? The known solution precludes the use of flexbox. – Paulie_D Jul 16 '19 at 09:03

Prevent text from being wider than an image in a flex container

0 Answers0