How not to overflow on the left when using justify-content: space-evenly

user_2290493 0
Viewed 216

In a grid layout with justify-content: space-evenly, when the columns are jointly wider than the container, the content is centered and overflows both left and right. I'd expect it to align left and only overflow on the right (like is the case with space-between).

space-evenly: https://jsfiddle.net/78yv9uhp/5/

Space evenly overflows its container left and right.

space-between: https://jsfiddle.net/78yv9uhp/6/

enter image description here

This is particularly noticeable when adding scrollbars (like overflow: auto) to the container. The content on the right can be scrolled to, but the left-overflowing content remains unreachable.

Is this intended behaviour? And is there a way to get the content to align left when it overflows?

flexbox grid css html
2 Answers

If I understood correctly, you can achieve it through justify-content: left

An example:

body {
  padding: 1rem 3rem;
}
* {
  box-sizing: border-box;
}
#container {
  background-color: #eee;
  border: .75em solid;
  padding: .75em;
  width: 220px;

  display: grid;
  grid-template-columns: 170px 70px;
  grid-auto-rows: 40px;
  grid-gap: 10px;

  justify-content: left;
  overflow: auto;
}
.cell {
  background-color: rgba(0,0,255,.2);
  border: 3px solid #00f;
}
<div id="container">
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
</div>

UPDATE:

In addition, you can remove justify-content property. Thanks to @doğukan and @Mr t

An example:

body {
  padding: 1rem 3rem;
}
* {
  box-sizing: border-box;
}
#container {
  background-color: #eee;
  border: .75em solid;
  padding: .75em;
  width: 220px;

  display: grid;
  grid-template-columns: 170px 70px;
  grid-auto-rows: 40px;
  grid-gap: 10px;

  justify-content: left;
}
.cell {
  background-color: rgba(0,0,255,.2);
  border: 3px solid #00f;
}
<div id="container">
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
</div>

UPDATE 1:

If space between columns should be the same when overflow: auto, then we can set the same values for padding and grid-gap.

An example:

body {
  padding: 1rem 3rem;
}

* {
  box-sizing: border-box;
}

#container {
  background-color: #eee;
  border: .75em solid;
  padding: .75em;
  width: 220px;

  display: grid;
  grid-template-columns: 170px 70px;
  grid-auto-rows: 40px;
  grid-gap: .75em;

  justify-content: space-evenly;
  overflow: auto;
}
.cell {
  background-color: rgba(0,0,255,.2);
  border: 3px solid #00f;
}
<div id="container">
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
</div>

user_16462400

I found the CSS specs describe a "fallback alignment" in case the spacing cannot be applied. For space-between this is start whereas for space-evenly this is center, unfortunately. This explains the observed overlap difference.

Nevertheless, the spec also mentions

A future level of this module may allow the fallback alignment to be specified explicitly.

so perhaps with time we may be able to set the fallback to start.

Until that time I've found a workaround: set min-width on the container. To avoid excessive width, wrap the container in a scrolling parent element. Demo here.

user_22904930
Related