flexboxgrid icon indicating copy to clipboard operation
flexboxgrid copied to clipboard

Published 20 hours ago • verified publisher icon kristoferjoseph

.container produces horizontal scroll bar for min-width: 75em

Open ashour opened this issue 7 years ago • 1 comments

Found this issue when trying to use .container to have a centred, limited-width layout container. Normally and at all sizes the layout container should not result in any horizontal scrolling. For 75em, however, right at the breakpoint, a horizontal scrollbar pops up in the browser.

Here's some test code that reproduces the issue:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Grid Container Test</title>
    <link rel="stylesheet" href="flexboxgrid.css">
    <style>
        .box { background-color: orange; height: 1em; }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-md-4"><div class="box"></div></div>
            <div class="col-xs-12 col-md-8"><div class="box"></div></div>
        </div>
    </div>
</body>
</html>
  • OS: macOS Sierra 10.12.5
  • Browser: Chrome 59.0.3071.115

ashour avatar Jul 19 '17 15:07 ashour

Seems like flexboxgrid was abandoned by @kristoferjoseph, so I forked project and made flexboxgrid2.

What is already done:

  • added breakpoint xl for 1200px and sm now pointed to 576px (#232) like Bootstrap v4,
  • fixed .container class and now it works properly and not causing horizontal scroll (#254),
  • cleaned up from messy structure (#249)

flexboxgrid2 right now is alpha5, so if you can test it and fills issues (or PRs!) I'll be very grateful.

imevro avatar Aug 02 '17 12:08 imevro