Overflow: Hidden Behind Padding

overflow: hidden behind padding

Simply wrap your content in another element and apply the overflow: hidden to that instead:

table {   width: 100px;    table-layout:fixed;  }
td {  border: 1px solid red;  padding: 10px;}
.inner {    border: 1px solid blue;    overflow: hidden;    text-overflow: ellipsis;}

<table>    <tr>        <td><div class="inner">123456789012345678901234567890</div></td>    </tr></table>

How can I force overflow: hidden to not use up my padding-right space

I have the same problem with the overflow:hidden; obeying all the padding rules, except for the right hand side. This solution works for browsers that support independent opacity.

I just changed my CSS from:

padding: 20px;
overflow: hidden;

to

padding: 20px 0 20px 20px;
border-right: solid 20px rgba(0, 0, 0, 0);

Having container divs works fine, but that effectively doubles the amount of divs on a page, which feels unnecessary.

Unfortunately, in your case this won't work so well, as you need a real border on the div.

CSS: Is it correct that text content of a div overflows into the padding?

This is the correct behavior. overflow: hidden will clip content that extends outside the box. Padding is inside the box, so content will happily overflow into that space if necessary.

(source)

To get the effect you seem to be aiming for, one solution is wrap your div.foo in an another div and set the background on that one instead, like this:

<div class="foowrapper">
    <div class="foo">purrrrrrrrr</div>
</div>

.foo {
    overflow: hidden;
    width: 40px;
}
.foowrapper {
    padding-right: 10px
    background: red;
    border: 1px solid green;
}

Fixed Element is Being Affected by overflow:hidden Parent

https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block :

If the position property is absolute or fixed, the containing block
may also be formed by the edge of the padding box of the nearest
ancestor element that has the following:

A transform or perspective value other than none

Ancestor <div class="shirts-list__colors"> has a transform value of translateY(0).

The image exceed to the padding area of the parent div

It's because overflow property will only hide the child of the element from the border and outwards. If you want to limit your image not to exceed the content box, you have to put some inner container or make the image to contain.

First Option

<div data-img-url="images/image7.jpg" class="p-thumbnail">
    <div class="imgcover">
       <img src="images/image7.jpg" />
    </div>
</div><div data-img-url="images/image8.jpg" class="p-thumbnail">
    <div class="imgcover">
       <img src="images/image7.jpg" />
    </div>
</div><div data-img-url="images/image9.jpg" class="p-thumbnail">
    <div class="imgcover">
       <img src="images/image7.jpg" />
    </div>
</div><div data-img-url="images/image10.jpg" class="p-thumbnail">
    <div class="imgcover">
       <img src="images/image7.jpg" />
    </div>
</div>

With additional CSS

div.imgcover{
    width: 100%;
    overflow: hidden;
}

If you want your image to be centered on the imgcover div you can use

.p-thumbnail{
    position: relative;
}

.p-thumbnail img {
    max-height: 100%;
    max-width: 100%;
    display: block;
    margin: 0 auto;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

Second Option

Change the style of the image to this to emulate object-fit: contain

.product-preview .p-thumbnail {
    height: 120px;
    width: 25%;
    display: inline-block;
    padding: 10px 5px;
    overflow: hidden;
    text-align: center;
}
.p-thumbnail img {
    max-height: 100%;
    max-width: 100%;
    display: block;
    margin: 0 auto;
}

---

Related Topics