html - Last margin / padding collapsing in flexbox -
i have list of items i'm trying arrange scrollable horizontal layout flexbox.
each item in container has margin left , right, right margin of last item being collapsed.
is there way stop happening, or workaround?
codepen of issue: http://codepen.io/anon/pen/wxmdpn
ul { list-style-type: none; padding: 0; margin: 0; display: flex; height: 300px; overflow: auto; width: 600px; background: orange; } ul li { background: blue; color: #fff; padding: 90px; margin: 0 30px; white-space: nowrap; flex-basis: auto; }
<div class"container"> <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> </ul> </div>
this appears default behavior on major browsers: in testing, right margin collapses in firefox, chrome, safari, ie11 , edge.
without going great deal of experimentation, i'll suggest behavior defined in spec:
10.3.3 block-level, non-replaced elements in normal flow
the following constraints must hold among used values of other properties:
margin-left
+border-left-width
+padding-left
+width
+padding-right
+border-right-width
+margin-right
= width of containing blockif
width
notauto
,border-left-width
+padding-left
+width
+padding-right
+border-right-width
(plus ofmargin-left
ormargin-right
notauto
) larger width of containing block,auto
valuesmargin-left
ormargin-right
are, following rules, treated zero.if of above have computed value other
auto
, values said "over-constrained" , 1 of used values have different computed value. ifdirection
property of containing block has valueltr
, specified value ofmargin-right
ignored , value calculated make equality true. if value ofdirection
rtl
, happensmargin-left
instead(emphasis added)
so, according css visual formatting model, containing block may "over-constrained" and, result, right margin gets tossed out.
one solution add right border last element:
li:last-child { border-right: 30px solid orange; }
ul { list-style-type: none; padding: 0; margin: 0; display: flex; height: 300px; overflow: auto; width: 600px; background: orange; } ul li { background: blue; color: #fff; padding: 90px; margin: 0 30px; white-space: nowrap; flex-basis: auto; } li:last-child { border-right: 30px solid orange; }
<ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> </ul>
another solution uses pseudo-elements instead of margins (or padding).
pseudo-elements on flex container rendered flex items. first item in container ::before
, last item ::after
.
ul::after { content: ""; flex: 0 0 30px; }
ul { list-style-type: none; padding: 0; margin: 0; display: flex; height: 300px; overflow: auto; width: 600px; background: orange; } ul li { margin: 0 30px; background: blue; color: #fff; padding: 90px; white-space: nowrap; flex-basis: auto; } ul::after { content: ""; flex: 0 0 30px; } ul::before { content: ""; flex: 0 0 30px; }
<ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> </ul>
Comments
Post a Comment