0

Consider the following example:

.container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: row;
  padding: 0px;
}

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

.right {
  margin-left: 3px;
  justify-content: flex-end;
  background-color: blue;
}

.row {
  display: flex;
  flex-direction: row;
}

.item {
  background-color: grey;
  min-width: 180px;
  margin: 10px;
}

.panel {
  display: flex;
  flex-direction: column;
  background-color: yellow;
  overflow-x: scroll;
}
<div class="container">
  <div class="left">
    <div class="title">
      LEFT TITLE
    </div>

    <div class="panel">
      <div class="row">
        <div class="item">
          Item 1
        </div>
        <div class="item">
          Item 2
        </div>
        <div class="item">
          Item 3
        </div>
        <div class="item">
          Item 4
        </div>
        <div class="item">
          Item 5
        </div>
      </div>
    </div>
  </div>
  <div class="right">
    RIGHT TITLE
  </div>
</div>

As you can see, the panel class is pushing right the right panel to out of screen boundaries, and the overflow-x property is not being applied to panel.

Why is panel not respecting the width of screen and overflowing horizontally, not displaying my overflow-x required scrollbar ? Check that my container contains width: 100% and I expected that to be respected.

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Mendes
  • 17,489
  • 35
  • 150
  • 263

0 Answers0