1

I'm having some issues getting the children of a flex container with overflow-x take full width of its content.

The goal is to have the content items use "flex: 1 0 216px", and when they can't all fit on the screen, the scroll bar appears so users can scroll to see the rest of the content. But as you can see in the snippet below, the ".row" div for some reason doesn't take the full width of it's parent ".container", causing the background color and border to not reach the edge of the content. I've made the background of the container gray to emphasize the issue.

Here is a simplified version of the code. Thanks!

.container {
  height: 100%;
  background-color: lightgray;
  overflow-x: auto;
}
.row {
  background: lightyellow;
  min-height: 48px;
  padding-top: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid gray;
  display: flex;
  align-items: center;
  flex-basis: 100%;
  width: 100%;
}

.content {
  flex: 1 0 216px;
}
<div class="container">
    <div class="row">
      <div class="content">Content</div>
      <div class="content">Content</div>
      <div class="content">Content</div>
      <div class="content">Content</div>
    </div>
    <div class="row">
      <div class="content">Content</div>
      <div class="content">Content</div>
      <div class="content">Content</div>
      <div class="content">Content</div>
    </div>
    <div class="row">
      <div class="content">Content</div>
      <div class="content">Content</div>
      <div class="content">Content</div>
      <div class="content">Content</div>
    </div>
</div>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Joe Parisi
  • 33
  • 6

1 Answers1

0

There is certainly some problem between flex and overflow: auto, I just didn't go too deep in that. If it is only about achieving full width for .row elements, instead of width: 100%; you can set min-width: calc(4 * 216px);, (since you have set flex-shrink: 0 and flex-basis: 216px; on .content, I assume .content will never be smaller than that... )

Slobodan Krasavčević
  • 84
  • 3
  • Thanks for the suggestion! Unfortunately the content will be dynamic so that won't work. Based on this being flagged as a duplicate, I read the other ticket and it seems the answer there is this is not possible in CSS. Oh well! – Joe Parisi Jun 30 '18 at 16:56