CODEWITHSUNDEEP
csshtml
Boomah
Boomah

Reputation: 1192

How do I get a div to grow horizontally off the screen

I have a layout that has a table in it. I would like the div containing the table to grow horizontally if the data the table contains is wide enough to go off the screen. It currently works when the data goes off the screen vertically but not horizontally. This is the code:

#main-content {
  display: flex;
  background-color: lightblue;
}
#field-selection-area {
  flex-shrink: 0;
  border: 1px #AAAAAA solid;
  background-color: aliceblue;
}
#field-selection-area ul {
  list-style: none;
  padding: 4px;
  margin: 0;
}
#field-table-area {
  border-right: 1px #AAAAAA solid;
  border-bottom: 1px #AAAAAA solid;
}
.field-area {
  border-top: 1px #AAAAAA solid;
  padding: 4px;
}
#table-area {
  border-top: 1px #AAAAAA solid;
}
#table-area table td {
  border: 1px #AAAAAA solid;
}
<div id="main-content">
  <div id="field-selection-area">
    <ul class="no-text-selection">
      <li>Period</li>
      <li>Market</li>
      <li>Trade ID</li>
    </ul>
  </div>

  <div id="field-table-area">
    <div id="field-config-area">
      <div id="filter-field-area" class="no-text-selection field-area">
        Drop Filter Fields Here
      </div>

      <div id="row-field-area" class="no-text-selection field-area">
        Drop Row Fields Here
      </div>

      <div id="column-field-area" class="no-text-selection field-area">
        Drop Column Fields Here
      </div>
    </div>

    <div id="table-area">
      <table>
        <tr>
          <td>18.0</td>
          <td>18.0</td>
          <td>18.0</td>
          <td>18.0</td>
          <td>18.0</td>
          <td>18.0</td>
          <td>18.0</td>
          <td>18.0</td>
          <td>18.0</td>
          <td>18.0</td>
          <td>18.0</td>
          <td>18.0</td>
          <td>18.0</td>
          <td>18.0</td>
          <td>18.0</td>
          <td>18.0</td>
          <td>18.0</td>
          <td>18.0</td>
          <td>18.0</td>
        </tr>
      </table>
    </div>
  </div>
</div>

This is it working when the screen is wide enough:

Working when screen is wide enough But if I resize the screen and then scroll this is what happens:

Not working when screen size too small In the image above I have scrolled to the right slightly. I would like the table to be fully contained. Does anyone know how to do that?

Upvotes: 2

Views: 135

Answers (1)

jbutler483
jbutler483

Reputation: 24559

you could use overflow: auto on your table-area: 

#table-area{
    border-top: 1px #AAAAAA solid;
    overflow:auto;
}

demo:

#main-content{
    display: flex;
    background-color: lightblue;
}

#field-selection-area{
    flex-shrink: 0;
    border: 1px #AAAAAA solid;
    background-color: aliceblue;
}

#field-selection-area ul{
    list-style: none;
    padding: 4px;
    margin: 0;
}

#field-table-area{
    border-right: 1px #AAAAAA solid;
    border-bottom: 1px #AAAAAA solid;
}

.field-area {
    border-top: 1px #AAAAAA solid;
    padding: 4px;
}

#table-area{
    border-top: 1px #AAAAAA solid;
    overflow:auto;
}

#table-area table td{
    border: 1px #AAAAAA solid;
}
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Pivot Web</title>
    <link rel="stylesheet" href="style2.css">
</head>
<body>

<div id="main-content">
    <div id="field-selection-area">
        <ul class="no-text-selection">
            <li>Period</li>
            <li>Market</li>
            <li>Trade ID</li>
        </ul>
    </div>

    <div id="field-table-area">
        <div id="field-config-area">
            <div id="filter-field-area" class="no-text-selection field-area">
                Drop Filter Fields Here
            </div>

            <div id="row-field-area" class="no-text-selection field-area">
                Drop Row Fields Here
            </div>

            <div id="column-field-area" class="no-text-selection field-area">
                Drop Column Fields Here
            </div>
        </div>

        <div id="table-area">
            <table>
                <tr>
                    <td>18.0</td>
                    <td>18.0</td>
                    <td>18.0</td>
                    <td>18.0</td>
                    <td>18.0</td>
                    <td>18.0</td>
                    <td>18.0</td>
                    <td>18.0</td>
                    <td>18.0</td>
                    <td>18.0</td>
                    <td>18.0</td>
                    <td>18.0</td>
                    <td>18.0</td>
                    <td>18.0</td>
                    <td>18.0</td>
                    <td>18.0</td>
                    <td>18.0</td>
                    <td>18.0</td>
                    <td>18.0</td>
                </tr>
            </table>
        </div>
    </div>
</div>

</body>
</html>

Upvotes: 2

Related Questions