Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Having a problem with border delcaration breaking flexbox layout

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #169536
    veganista
    Participant

    Hello All,

    I’m having an issue where removing a border declaration is breaking my flex box layout.

    Its mostly explained in the fiddle here: http://jsfiddle.net/8c5Mw/5/

    I’ll reiterate though:

    I added some styles to help me debug while i was working on it and set up everuything i needed. I then moved the markup and relevant CSS to my project and it broke. I tracked it down to the border declarartion at the bottom of the CSS panel.

    It seems that when you remove this property it breaks the layout.

    Can anyone explain why this is happening?

    #169541
    Chris Coyier
    Keymaster

    Pretty weird! I tinkered with it for a minute thinking it would be fairly obvious but it wasn’t to me at all.

    I did discover that without the border there, the browser renders it at 0 width, hence the weird collapsing/breaking. Also using padding in that rule “fixes” it just like border does.

    #170250
    veganista
    Participant

    Nice one wolfcry.

    I thought i’d read that the default value for that was 0%. Obviously i was wrong.

    Updated fiddle: http://jsfiddle.net/liamthis/8c5Mw/8/

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.