Question 236881 in Html Question posted in
Some basic documentation can be found here.

Html – In bootstrap col with inner element with big width taking more width that should

I am trying to have two same size columns, in which I can have nested elements with big size, with overflow: scroll;. But that col width is becoming 100%; What interesting, if I am adding small width to that column ( <div class="col" style="background:blue";width:100px;>), the problem is gone. Cols becoming 50%;
I am trying to understand why the column is getting 100% and how I can get desired result, but not adding width to column?

<div class="row">
  <div class="col" style="background:blue">
    <div style="overflow:scroll;">
      <div style="width:10000px;">should be overflowed and 50%</div>
    </div>
  </div>
  <div class="col" style="background:yellow">should be 50%</div>
</div>
Tags:

2

Answers


  1. 0

    You need to add the Bootstrap class overflow-auto to the column with a lot of content.

    See the snippet below.

    <!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap demo</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
</head>

<body>
  <div class="row d-flex">
    <div class="col overflow-auto" style="background:blue">
      <div style="overflow:scroll;">
        <div style="width:10000px;">should be overflowed and 50%</div>
      </div>
    </div>
    <div class="col" style="background:yellow">should be 50%</div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
</body>

</html>
    Login or Signup to reply.
  2. 0

    Turning the row into a flexbox and setting the maximum width for the column might be an option.

    .row {
  display: flex;
}

.col {
  max-width: 50%;
}
    <div class="row">
  <div class="col" style="background:blue">
    <div style="overflow:scroll;">
      <div style="width:10000px;">should be overflowed and 50%</div>
    </div>
  </div>
  <div class="col" style="background:yellow">should be 50%</div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search