Spacing on column causes scrollbar to appear

[opsb]

The big picture of what I'm trying to do

Add spacing to a column

What I did

(ellie wasn't saving)

module Main exposing (..)

import Html exposing (Html)
import Element exposing (..)
import Element.Attributes exposing (..)
import Style exposing (..)

type Styles
    = None

stylesheet : StyleSheet Styles variations
stylesheet =
    Style.stylesheet
        []

main : Html a
main =
    viewport stylesheet <|
        column None
            [ spacing 20
            ]
            [ el None [] (text "one")
            , el None [] (text "two")
            ]

What I Expected To Happen

The column items should have 20px of space between them

What Actually Happened

The items have the spacing but there's also a scrollbar on the x-axis.

Versions

• Elm: 0.18
• style-elements: 3.3.0
• Browser: Chrome 61.0.3163.79
• Operating System: macOS 10.12.6

[Augustin82]

I'm experiencing similar issues in 4.2.0, where columns/rows with spacing become bigger than their containing parent, leading to the column/row becoming scrollable in both directions.

This seems to sometimes be fixed by els or, in some cases, by wrapping an empty (with no attributes) row around an offending column or wrapping an empty column around a row.

[mikolajpp]

I am experiencing similar issues. I have a grid layout which becomes scrollable even though elements are not overflowing whenever I add "xScrollbar" or "yScrollbar". What is worse, it becomes scrollable in both directions, once Scrollability is added.

Edit: It seems I am wrong. As per CSS mdn spec: scroll The content is clipped and desktop browsers use scrollbars, whether or not any content is clipped. This avoids any problem with scrollbars appearing and disappearing in a dynamic environment. Printers may print overflowing content.

So this behaviour is actually consistent. Now I am off to see if overflow detection is possible, and turn scrollbars only then