web-dev-qa-db-fra.com

Lorsqu'un élément enfant déborde horizontalement, pourquoi le bon remplissage du parent est-il ignoré?

Compte tenu de cette structure simple:

<div id="parent">
    <div id="child">Lorem ipsum</div>
</div>

avec ce CSS:

#parent {
    width: 200px;
    height: 200px;
    padding: 20px;
    overflow-x: scroll;
}

#child {
    width: 500px;      
}

Démo en direct: http://jsfiddle.net/523me/5/

Notez que le parent a un 20px padding et que l'enfant déborde horizontalement (car il est plus large). Si vous faites défiler le parent complètement vers la droite, vous verrez que l'enfant touche le bord droit du parent.

Ainsi, le parent doit avoir un bon remplissage, mais il est ignoré. Il semble que lorsque l'enfant a une largeur fixe, le rembourrage droit du parent ne s'applique pas. (Est-ce spécifié par une norme? J'adorerais le savoir. Veuillez me le faire savoir si vous trouvez quelque chose!)

Existe-t-il un moyen de forcer le bon remplissage à appliquer dans ce scénario sans avoir à supprimer l'un des éléments du flux (en flottant ou en positionnant)?

enter image description here

Capture d'écran 1 - Le rembourrage droit est ignoré. C'est ainsi que se comportent tous les navigateurs actuels.

Capture d'écran 2 - Le bon rembourrage s'applique. C'est ce que j'essaye d'accomplir. (Btw, la capture d'écran provient d'IE7, qui est le seul navigateur qui n'ignore pas le bon remplissage.)

htmlcssbrowseroverflow
51
Šime Vidas

Vous souffrez de this problème.

Je le résoudrais en donnant une marge à l'enfant (et non un remplissage au parent):

body {
  padding: 2em;
}

#parent {
  width: 200px;
  height: 200px;
  overflow-x: scroll;
  background: gray;
}

#child {
  width: 500px;
  background: yellow;
  margin: 20px;
  display: inline-block;
}
<div id="parent">
  <div id="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et turpis eu lorem consectetur blandit sed vel ligula. In lorem ligula, lacinia sed aliquet sed, congue quis tortor. In sed magna eros, eget blandit arcu. Nulla sit amet volutpat ipsum. Duis
    quis nisl massa. Sed ipsum magna, tempus non malesuada in, gravida et sapien. Fusce a odio nulla, quis ultrices mauris. Maecenas in tellus id massa fringilla molestie.</div>
</div>
25
Joao

Je ne sais pas mais en ajoutant:

#child{
  display: inline-block;
}

Semble le réparer: http://jsfiddle.net/523me/6/

Je n'ai testé que dans le dernier Chrome, peut-être pas pour plusieurs navigateurs

5
stephenmurdoch

Non, le remplissage n'est pas ignoré, mais il est toujours à l'intérieur du parent.

Voir jsFiddle mis à jour , où vous pouvez voir que le remplissage n'a pas bougé de sa position d'origine.

Edit: Hm, il y a quelques anomalies. Si vous donnez à la div interne une marge droite, cela est également ignoré. Hm. Je vote pour votre question.

4
Mr Lister

Vous pouvez changer le remplissage en bordure.

padding: 20px;

à

border: 20px solid gray;
2
Circle B

Appliquez padding-right à l'élément qui déborde lui-même et déplacez l'arrière-plan vers son élément enfant direct.

<div id="parent">
    <div id="child"><div>Lorem ipsum...</div></div>
</div>

<style>
#parent {padding-right: 0; }
#child {padding-right: 20px; }
#child > DIV {background: yellow; }
</style>

http://jsfiddle.net/523me/9/

0
Marat Tanalin