CODEWITHSUNDEEP
htmlcssflexbox
Klyner
Klyner

Reputation: 4163

How to change the div overflowing behaviour using flex?

I have two div elements which I want to center within an 'li' element. I found out that this could be done by using a flex layout. My parent div has the following properties:

display: -webkit-flex;
justify-content: center;
align-items: center;

This works and the two child divs are centering within the 'li'. Those are an image and a text element. But the additional behaviour this has, is not what I want. When the screen is too small for one line text, it is overriding the image. It looks like the following:

Behaviour

The more I shrink the page, the more the image dissappears. Does anybody know how this comes and how I can fix it?

EDIT Currently I am finding out how to add a working code snippet. For now, I have an image with the content structure, maybe this helps a bit.

enter image description here

I fill the image using the following css code:

.img_info_icon_png {
   background: url("adapter-images.png") no-repeat -432px -0px;
   width:  24px;
   height: 24px;
}

Although the width is set to '24px', it is changing within the browser.

EDIT The following url is pointing to an example with the same behaviour: https://jsfiddle.net/Lkpxhux0/

Upvotes: 0

Views: 53

Answers (1)

Asons
Asons

Reputation: 87191

As the flex-shrink defaults to 1, it allows for the items to shrink when not fit its parent.

Add flex-shrink: 0 to the .img_info_icon_png rule.

.outer {
  display: flex;
  justify-content: center;
  align-items: center;
}
.outer .image {
   background: url(http://placehold.it/50/f00) no-repeat;
   width:  24px;
   height: 24px;
   flex-shrink: 0;
}
<div class="outer">
  <div class="image"></div>
  <div class="text">
    This is some text that should not overlap the left aligned image
  </div>
</div>

Upvotes: 1

Related Questions