CODEWITHSUNDEEP
htmlcssflexbox
Andrei Kovalev
Andrei Kovalev

Reputation: 959

How to make content scrollable in flex box so that another box remains with constant width

I am trying to construct a flexbox grid so that the width of the left side remains constant while the viewport being resizing. On the other hand, the right side should shrink and its content becomes scrollable.

.flex-container {
  display: flex;
  justify-content: center;
}

.flex-content {
  display: flex;
  width: 800px;
  height: 400px;
  justify-content: space-between;
  align-content: stretch;
  background-color: cadetblue;
}

.left-side {
  width: 200px;
  flex: initial;
  background-color: darkcyan;
}

.right-side {
  flex: 1;
  background-color: bisque;
}

.inner-content {
  background-color: aquamarine;
}
<div class="flex-container">
  <div class="flex-content">
    <div class="left-side"></div>
    <div class="right-side">
      <div class="inner-content">
        Abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
      </div>
    </div>
  </div>
</div>

Expected: left-side container should remain 200px wide while right-side is shrinking when the width of the viewport becomes less than 800px. The inner-content box becomes scrollable when there is no room for its content.

Actual: left-side is shrinking when the width of right-side reaches to the width of inner-content.

Upvotes: 1

Views: 71

Answers (2)

nhannt210695
nhannt210695

Reputation: 89

<!DOCTYPE html>
<html>

<head>
    <style>
        .flex-container {
            display: flex;
            justify-content: center;
            min-width: 200px; /*nhannt210695 left-side width = 200px. [left-side=200px] |<- limit */
        }

        .flex-content {
            display: flex;
            width: 800px;
            height: 400px;
            justify-content: space-between;
            align-content: stretch;
            background-color: cadetblue;
        }

        .left-side {
            width: 200px; 
            flex: initial;
            background-color: darkcyan;
        }

        .right-side {
            flex: 1;
            background-color: bisque;
            width: 0px; /* nhannt210695 string "Abcd..." on the right */
        }

        .inner-content {
            background-color: aquamarine;
            overflow: auto; /* nhannt210695 auto overflow of text*/
        }
    </style>
    <title>How to make content scrollable in flex box so that another box remains with constant width</title>
</head>

<body>

    <div class="flex-container">
        <div class="flex-content">
            <div class="left-side"></div>
            <div class="right-side">
            <!-- Tip: delete div of inner-content and change screen -->
                <div class="inner-content">
                    Abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
                </div>
            </div>
        </div>
    </div>
</body>

</html>

Upvotes: 1

kukkuz
kukkuz

Reputation: 42352

Instead of setting width: 200px you can set flex-grow and flex-shrink to zero for the left-content and then set flex-basis to 200px

  • the flex shorthand would be flex: 0 0 200px,

  • make your right-section a flexbox too (and optionally align it along the cross-axis to the start using align-items: flex-start),

  • add min-width: 0 to the right-section so that it overrides the default min-width: auto - now it will be able to shrink beyond its contents,

  • also add overflow: auto to the inner-content (and width: 100% if you need the inner-content to fill the horizontal space).

See demo below (also removed some redundant / unwanted styles):

.flex-container {
  display: flex;
  justify-content: center;
}

.flex-content {
  display: flex;
  width: 800px;
  height: 400px;
  /*justify-content: space-between;
  align-content: stretch;*/
  background-color: cadetblue;
}

.left-side {
  /* width: 200px;
  flex: initial; */
  flex: 0 0 200px;  /* added */
  background-color: darkcyan;
}

.right-side {
  flex: 1;
  background-color: bisque;
  display: flex; /* added */
  align-items: flex-start; /* added */
  min-width: 0; /* added */
}

.inner-content {
  background-color: aquamarine;
  width: 100%; /* if needed */
  overflow: auto; /* added */
}
<div class="flex-container">
  <div class="flex-content">
    <div class="left-side"></div>
    <div class="right-side">
      <div class="inner-content">
        Abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
      </div>
    </div>
  </div>
</div>

Upvotes: 2

Related Questions