First flex item in a row disappearing outside left viewport edge without access via scroll

Question

I have a flex container with three flex items in a row.

I'm trying to understand why when the screen isn't wide enough to accommodate all content, the 1st flex box gets truncated.

My expectation is that the horizontal scroll bar on .boxes_container allows all the content in #boxa to be visible provided we scroll.

Some quick notes:

• Fixed widths are intentional.

• In .boxes_container, justify-content:center is intentional. In the actual implementation the boxes are dynamic and I want the boxes to be centered if for example only one is visible.

.boxes_container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  height: 77vh;
  /* We need to set an explicit height here that translates into a real value
   or scroll bars will not work because heights need a concrete value 
  */
  overflow-x: auto;
}
#boxa {
  background-color: #994400;
  display: flex;
  flex-direction: column;
  flex: 0 0 620px;
  height: 100%;
  /*
   .boxa_content{
    flex: 1 1 auto;
    overflow-y: auto;
   }
    */
}
#boxb {
  background-color: #449900;
  display: flex;
  flex-direction: column;
  flex: 0 0 620px;
  height: 100%;
  padding: 5px;
  border: 2px solid #DDD;
  border-radius: 8px;
}
#boxb .preview_content {
  flex: 1 1 auto;
  overflow-y: auto;
}
#boxc {
  display: flex;
  flex: 0 0 500px;
  height: 100%;
  flex-direction: column;
  overflow-y: auto;
  padding: 5px;
}

<div class="boxes_container">
  <div id="boxa">
    <h1>Stuff kajsdlkaj laksdjlka jslkdja sldjals jdlaksjd lkajs dlkajs dlkjas lkdjal ksdjalks jdlaj </h1>
  </div>
  <div id="boxb">
    <h1>Stuff2 a;sldka;lskd a;lksd ;laks;dl kas;ldk a;lskd; laksd;la ksd;lak s;dlka s;ldlk a;lslkd ;alskd ;lask d;</h1>
  </div>
  <div id="boxc">
    <h2>slkjdflksjd lfsjdklfs jdlkfjs ldkfjs ldkfj sl</h2>
  </div>
</div>

codepen demo

Answer 1

The left box gets truncated because you are centering the content. When there isn't enough space, the content overflows the same amount on the left and right sides.

You can solve it by using margin: auto on the first and last elements as a way to center the content only when there is space left

.boxes_container {
  display: flex;
  flex-direction: row;
  height: 77vh;
  overflow-x: auto;
}

.boxes_container div:first-child {
  margin-left: auto;  
}
.boxes_container div:last-child {
  margin-right: auto;  
}
#boxa {
  background-color: #994400;
  display: flex;
  flex-direction: column;
  //width: 620px;
  flex: 0 0 620px;
  height: 100%;
}
#boxb {
  background-color: #449900;
  display: flex;
  flex-direction: column;
  //width: 620px;
  flex: 0 0 620px;
  height: 100%; // this is so important for the scrollbar behavior we want
  //align-self:flex-start;
  padding: 5px;
  border: 2px solid #DDD;
  border-radius: 8px;
  .preview_content {
    flex: 1 1 auto;
    overflow-y: auto;
  }
}
#boxc {
  display: flex;
  //width: 500px;
  flex: 0 0 500px;
  height: 100%;
  flex-direction: column;
  overflow-y: auto;
  padding: 5px;
}

<div class="boxes_container">
  <div id="boxa">
    <h1>Stuff kajsdlkaj laksdjlka jslkdja sldjals jdlaksjd lkajs dlkajs dlkjas lkdjal ksdjalks jdlaj </h1>
  </div>
  <div id="boxb">
    <h1>Stuff2 a;sldka;lskd a;lksd ;laks;dl kas;ldk a;lskd; laksd;la ksd;lak s;dlka s;ldlk a;lslkd ;alskd ;lask d;</h1>
  </div>
  <div id="boxc">
    <h2>slkjdflksjd lfsjdklfs jdlkfjs ldkfjs ldkfj sl</h2>
  </div>

</div>