Overflow issue

Hi. I’m having an issue with a project i’m working on from front end mentor. I’ve placed two elements inside a card container and the first one is flowing outside the container. Both are set to inline-block and have the right dimensions to fit. I’ve tried reducing padding and content but that doesn’t seem to work (in some cases it increases the problem). I also have set everything to a border-box sizing. Any help would be appreciated!

If what you want to show overlaps, then give overflow-y: scroll; to your container. It will introduce a scroll bar, mind.

1 Like

Thanks for the reply. Overflow: hidden works perfectly for me as it doesnt have a scrollbar and it fits the content in. I’m wondering why the left element is overflowing as all the dimensions seem fine. I was having issues with the image too but learned that inline-block elements need to be side by side in the html doc or they go wonky.

1 Like

Not sure that your LIs are well formed.

<li><h2><span>10k+</span> Companies</h2></li>
1 Like

If I remove all content from the .info div the div fits fine in .card. As soon as I add any content (such as h2), the div overflows. I want to understand why this is the case before I resort to using the overflow property all the time. On the point you made, I seem to need to keep that li structure in order that the card displays like the example.

Here is my upload to Github if thats more helpful:

hanzou86.github.io/preview-card/index.html

Project Example:

If the LIs are inline-blocks, you can give them specific widths and style the two lines, rather than using H2.

<li>
  <p>10k+</p>
  <p>companies</p>
</li>

Using traversal we can target each P.

li p:nth(1) {
    font-size: 1.6em;
    font-weight: bold;
    color: white;
}
li p:nth(2) {
    font-size: 0.8em;
    text-transform: all-caps;
    color: #ddd;
}

May have to check the properties, just winging it, here.

1 Like

Thanks, that formatting does help make the code cleaner. I still used classes to target and remain semantic (such as .stat). As for the overflow I still have no idea why its doing it. I read the MDN documentation and have a good understanding as to why content does overflow. Its strange that it does it regardless of how much content is in the div. At this point I think I’ll concede to using overflow: hidden and hopefully the answer comes naturally down the road. Thank you for all your help!

EDIT: Thanks for the example you gave. The nth selector is really useful. How do you select something with it without applying to all child elements? For example, if I wanted to select the first p element in .info, but not the p elements that are nested deeper in the li elements?

The first P in .info is a direct child.

.info > p {

}
1 Like

Thank you, that makes things a lot easier.

1 Like