Getting flex items to horizontal scroll in flex container-CodePudding

I'm trying to implement horizontal scrolling of fixed width images which are wrapped in divs. The entire layout is wrapped in flex with a left right layout.

However, I'm not able to keep the parent width of the boxes from overflowing. I need the children boxes to scroll horizontally and its parent contained in a flex.

Link to fiddle: https://jsfiddle.net/wn8zd2t6/43/

.dash {
  display:flex;
  width:100%;
}

.left {
  width: 380px;
  height: 100vh;
}

.right {
  flex: 1 1 0%;
  display:flex;
  flex-direction: column;
}

.b {
  border:1px solid black;
}

.ig {
  display:inline-block;
  height:100px;
  width:180px;
  object-fit: cover;
}

.scrollable {
  white-space: nowrap;
  overflow-x:scroll;
}

.box {
  display: inline-block;
}

<div >
  <div >
    left
  </div>

  <div >
    <div>
      top section
    </div>
    <div >
      <!-- necessary -->
      <div>
        scrollable section title
      </div>
    
      <!-- need this to be scroll -->
      <div >
        <div >
                <img src="https://via.placeholder.com/150/FF0000/FFFFFF"  />
                <div>
                img caption
                </div>
        
        </div>
        <div >
                <img src="https://via.placeholder.com/150/FF0000/FFFFFF"  />
                <div>
                img caption
                </div>
        
        </div>
        <div >
                <img src="https://via.placeholder.com/150/FF0000/FFFFFF"  />
                <div>
                img caption
                </div>
        
        </div>
        <div >
                <img src="https://via.placeholder.com/150/FF0000/FFFFFF"  />
                <div>
                img caption
                </div>
        
        </div>
        <div >
                <img src="https://via.placeholder.com/150/FF0000/FFFFFF"  />
                <div>
                img caption
                </div>
        
        </div>
        <div >
                <img src="https://via.placeholder.com/150/FF0000/FFFFFF"  />
                <div>
                img caption
                </div>
        
        </div>
       
      </div>
      
      
    </div>
  </div>
</div>

CodePudding user response：

The flex-basis: 0% isn't enough to define a fixed width on the images container, therefore the overflow function doesn't have a break point.

Instead of flex: 1 1 0% use width: calc(100% - 380px) (the 380px being the fixed width of the other column).

This is all you need:

.right {
  /* flex: 1 1 0%; */
  width: calc(100% - 380px); /* new */
}

revised jsfiddle

.dash {
  display: flex;
  width: 100%;
}

.left {
  width: 380px;
  height: 100vh;
}

.right {
  /* flex: 1 1 0%; */
  width: calc(100% - 380px); /* new */
  display: flex;
  flex-direction: column;
}

.b {
  border: 1px solid black;
}

.ig {
  display: inline-block;
  height: 100px;
  width: 180px;
  object-fit: cover;
}

.scrollable {
  white-space: nowrap;
  overflow-x: scroll;
}

.box {
  display: inline-block;
}

<div >
  <div >
    left
  </div>

  <div >
    <div>
      top section
    </div>
    <div >
      <!-- necessary -->
      <div>
        scrollable section title
      </div>

      <!-- need this to be scroll -->
      <div >
        <div >
          <img src="https://via.placeholder.com/150/FF0000/FFFFFF"  />
          <div>
            img caption
          </div>

        </div>
        <div >
          <img src="https://via.placeholder.com/150/FF0000/FFFFFF"  />
          <div>
            img caption
          </div>

        </div>
        <div >
          <img src="https://via.placeholder.com/150/FF0000/FFFFFF"  />
          <div>
            img caption
          </div>

        </div>
        <div >
          <img src="https://via.placeholder.com/150/FF0000/FFFFFF"  />
          <div>
            img caption
          </div>

        </div>
        <div >
          <img src="https://via.placeholder.com/150/FF0000/FFFFFF"  />
          <div>
            img caption
          </div>

        </div>
        <div >
          <img src="https://via.placeholder.com/150/FF0000/FFFFFF"  />
          <div>
            img caption
          </div>

        </div>

      </div>


    </div>
  </div>
</div>

CodePudding user response：

I simplified your flex code into the following. I added border styling to the image divs for visual clarity of what's going on.

It's important to remember that to constrain a child element's width to a parent with flex view, the parent flex container must have a constraint on it's width, even if it's width: 100%;

You can see this within the .right class and that controls how the rest of that column's children behave with their flex-grow.

/* Utility */
.border-settings {
  border: 1px solid black;
}

.scrollable {
  display: flex;
  flex-direction: row;
  overflow-x: scroll;
  padding: 10px;
}

/* Container Settings */

.dashboard {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100vh;
}

.left {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.right {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  height: 100%;
  max-width: 50%;
}

.container {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.card {
  margin: 10px;
  padding: 10px;
  border-style: solid;
  border-color: black;
  border-width: 1px;
  border-radius: 10px;
}

/* Element Settings */

img {
  height: 100px;
  width: 180px;
}

<div >

  <div >
    left Section
  </div>

  <div >

    <div >
      top section
    </div>

    <div >
      <!-- necessary -->
      <div>
        scrollable section title
      </div>

      <!-- need this to be scroll -->
      <div >

        <div >
          <img src="https://via.placeholder.com/150/FF0000/FFFFFF" />
          <p>img caption</p>
        </div>

        <div >
          <img src="https://via.placeholder.com/150/FF0000/FFFFFF" />
          <p>img caption</p>
        </div>

        <div >
          <img src="https://via.placeholder.com/150/FF0000/FFFFFF" />
          <p>img caption</p>
        </div>

        <div >
          <img src="https://via.placeholder.com/150/FF0000/FFFFFF" />
          <p>img caption</p>
        </div>

        <div >
          <img src="https://via.placeholder.com/150/FF0000/FFFFFF" />
          <p>img caption</p>
        </div>

        <div >
          <img src="https://via.placeholder.com/150/FF0000/FFFFFF" />
          <p>img caption</p>
        </div>

      </div>

    </div>

  </div>

</div>