How can I ensure that the text in my inner div doesn't push away the div with a fixed width next to it?

Question

I have a div which works as a row. On the left and right it has an image. The ones on the left and right should have a fixed width and should keep being aligned to the left and right side. In the middle there is text. The moment when the text takes two lines, the left div is being pushed to the left. How can I change the css code so that it does not do this?

#parentDiv {
  width: 300px;
  position: relative;
  display: flex;
}

.item-image {
  background-image: url(http://placehold.it/200x150);
  background-repeat: no-repeat;
  background-position: center center;
  height: 60px;
  width: 100px;
  background-size: 80%;
}

.text {
  display: flex;
  align-items: center;
  text-align: left;
  padding-right: 50px;
}

.image2 {
  display: flex;
  position: absolute;
  right: 0;
  width: 50px;
  background-image: url(http://placehold.it/200x150);
  background-repeat: no-repeat;
  background-position: center center;
  height: 60px;
  background-size: 80%;
}

<div id="parentDiv">
  <div class="item-image"></div>
  <div class="text">hi this is an example</div>
  <div class="image2"></div>
</div>
<div id="parentDiv">
  <div class="item-image"></div>
  <div class="text">in this example the image is pushed</div>
  <div class="image2"></div>
</div>
<div id="parentDiv">
  <div class="item-image"></div>
  <div class="text">I want it like this</div>
  <div class="image2"></div>
</div>

`flex-shrink: 0;` to item-image? – Temani Afif May 01 '20 at 12:40 — Temani Afif, May 01 '20 at 12:40

score 2 · Accepted Answer · answered May 01 '20 at 12:49

2

Add

flex: 1;

to your .text class.

JSFiddle: http://jsfiddle.net/uty07v86/

answered May 01 '20 at 12:49

Can

553
1
9
29

How can I ensure that the text in my inner div doesn't push away the div with a fixed width next to it?

1 Answers1