1

I'm working on the layout below:

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0;
}

.tier-1 {
  flex: 0 0 40px;
}

.tier-2 {
  flex: 0 0 50px;
  background-color: steelblue;
}

.stuff {
  flex: 1 0 100px;
  background-color: navy;
  padding: 20px;
  overflow: auto;
}

.block-row {
  display: flex;
  margin-bottom: 10px;
  justify-content: center;
}

.block {
  flex: 0 0 470px;
  background-color: white;
  height: 300px;
  border-radius: 5px;
  margin: 20px;
  border: 2px solid grey;
}

.block.wide {
  flex: 0 0 950px;
  height: 150px;
  justify-content: flex-start;
}
<div class="tier-1"></div>
<div class="tier-2"></div>
<div class="stuff">
  <div class="block-row">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
  </div>
  <div class="block-row">
    <div class="block wide"></div>
  </div>
</div>

Also can be edited at this Codepen: http://codepen.io/brad_julian/pen/BpzmYy/

The problem is that if the viewport is too skinny, the boxes in the first row are getting cut off. What I want is for the ".stuff" space to have a horizontal scrollbar when the window is too small.

Any idea why that isn't working?

EDIT: The problem I'm having is identical to this question (except horizontal, not vertical)

Community
  • 1
  • 1
brad_julian
  • 157
  • 1
  • 8
  • The `justify-content: center` is causing the problem. (If you remove it, the scrollbar works.) You need to use `auto` margins. – Michael Benjamin Jan 13 '17 at 21:04
  • Simply replacing `justify-content: center;` with `margin: 0 auto;` changed the behavior but did not fix the problem. – brad_julian Jan 13 '17 at 21:21
  • Unlike `justify-content`, `auto` margins go on flex items, not the flex container. And only use them on the outer items: http://codepen.io/anon/pen/NdrMxj – Michael Benjamin Jan 13 '17 at 21:28
  • The second `.block-row` now overlaps the first if the vertical space is too small. In addition, the `margin-right` doesn't seem to reserve enough space while the left side does. – brad_julian Jan 13 '17 at 21:32
  • MDN has a good explanation of this behavior. See the duplicate post. – Michael Benjamin Jan 13 '17 at 21:34
  • I was able to fix the overlap between rows, but the right edge of my boxes being smack against the window edge seems to be an unfixable problem. I don't like that behavior, but it's better than what I had. Thanks for your help. – brad_julian Jan 13 '17 at 22:18
  • Consider using a right-side padding on the container. – Michael Benjamin Jan 13 '17 at 22:30

0 Answers0