CSS: flex-basis

Gallex · 2018-09-17 12:26:29

hi!

can anybody tell me why flex-basis not working with children items (.flexbox-1 and .flexbox-2) of .flex in this site?
it’s working well in other site

phiw13 · 2018-09-17 13:02:25

Try something like this: @.flex > div { min-width:0; }

For a flex-item (and a grid-item), the default value for min-width is auto not 0. See spec.

(and, the images are much larger in the first link than the second one, and, in your second link, the images are constrained to a max-width of 200px, and in the first site, there is a more complex tree)

another issue: in Firefox, the right part of the image is covered by the right hand column, not so in Safari / chromium browsers; not sure who’s correct)

Gallex · 2018-09-18 08:08:23

phiw13 wrote #314089:

Try something like this: .flex > div { min-width:0; } For a flex-item (and a grid-item), the default value for min-width isauto@ not 0. See spec.
(and, the images are much larger in the first link than the second one, and, in your second link, the images are constrained to a max-width of 200px, and in the first site, there is a more complex tree)

yep, the image was a devil and your solution solved it, thank’s!

another issue: in Firefox, the right part of the image is covered by the right hand column, not so in Safari / chromium browsers; not sure who’s correct)

it should not cover it, and higher z-index for .flexbox-2 helped here

Last edited by Gallex (2018-09-18 08:15:56)

phiw13 · 2018-09-18 08:23:50

Gallex wrote #314102:

yep, the image was a devil and your solution solved it, thank’s!

it should not cover it, and higher z-index for .flexbox-2 helped here

Yeah, probably. But what I meant by “who is correct” is “who is correct per spec“.

Textpattern CMS

Textpattern CMS support forum

#1 2018-09-17 12:26:29

CSS: flex-basis

#2 2018-09-17 13:02:25

Re: CSS: flex-basis

#3 2018-09-18 08:08:23

Re: CSS: flex-basis

phiw13 wrote #314089:

#4 2018-09-18 08:23:50

Re: CSS: flex-basis

Gallex wrote #314102:

Board footer