html overflow x failed

Question

I met a strange question, I set a div with style:

overflow-x: scroll

But the result is it doesn't overflow, just begin from a new line, my source code is as below:

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

<head>
  <meta charset="UTF-8">
  <title>test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1">
  <style>
    .fl {
      float: left;
    }
    .cp-header {
      height: 40px;
      padding: 7px 0px;
      border-bottom: 2px solid #cdcdcd;
      box-sizing: border-box;
    }
    .cp-header span {
      display: inline-block;
      border-right: 2px solid #cdcdcd;
      box-sizing: border-box;
      text-align: center;
      height: 24px;
      line-height: 24px;
      font-size: 14px;
    }
  </style>
</head>

<body>
  <div style="width: 30%; box-sizing: border-box" class="fl">
    <div class="cp-header" style="width:100%;">
      <span style="width:100%;">name</span>
    </div>
  </div>

  <div id="tabGrp" style="width: 70%; box-sizing: border-box;" class="fl">
    <div class="cp-header" style="display: inline-block; overflow-x: scroll; white-space: nowrap;">
      <span class="fl" style="width: 100px;">
                    tab
                </span>
      <span class="fl" style="width: 100px;">
                    tab
                </span>
      <span class="fl" style="width: 100px;">
                    tab
                </span>
      <span class="fl" style="width: 100px;">
                    tab
                </span>
      <span class="fl" style="width: 100px;">
                    tab
                </span>
      <span class="fl" style="width: 100px;">
                    tab
                </span>
      <span class="fl" style="width: 100px;">
                    tab
                </span>
      <span class="fl" style="width: 100px;">
                    tab
                </span>
      <span class="fl" style="width: 100px;">
                    tab
                </span>
      <span class="fl" style="width: 100px;">
                    tab
                </span>
      <span class="fl" style="width: 100px;">
                    tab
                </span>
    </div>
  </div>
</body>

</html>

As you can see from above, I wish content in "#tabGrp" can be horizontally scroll, for I have set the property overflow-x:scroll, if its child elements' width exceeds their parent's width, the parent should scroll, however it doesn't work, anything wrong with me?

You've set overflow-x: scroll; to .cp-header and not #tabGrp — Guruprasad J Rao
– Guruprasad J Rao, Commented Jul 21, 2016 at 9:27
And i think display:inline-block causes all child elements to start a new line — Jonas Wilms
– Jonas Wilms, Commented Jul 21, 2016 at 9:29

Asons · Accepted Answer · 2016-07-22 07:29:49Z

2 things, your span can't have/don't need float, the cp-header need a width

Note, you sholdn't mix inline and external style, so I changed it to external (recommended)

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

  <head>
    <meta charset="UTF-8">
    <title>test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1">
    <style>
      .tabCap {
        width: 30%;
        box-sizing: border-box;
      }
      .tabGrp {
        width: 70%;
        box-sizing: border-box;
      }
      .fl {
        float: left;
      }
      .cp-header {
        display: inline-block;
        white-space: nowrap;
        width: 100%;
        height: 60px;
        padding: 7px 0px;
        border-bottom: 2px solid #cdcdcd;
        box-sizing: border-box;
      }
      .cp-header.scroll {
        overflow-x: scroll;
      }    
      .cp-header span {
        display: inline-block;
        width: 100%;
        border-right: 2px solid #cdcdcd;
        box-sizing: border-box;
        text-align: center;
        height: 24px;
        line-height: 24px;
        font-size: 14px;
      }
      .cp-header.scroll span {
        width: 100px;
      }

    </style>
  </head>

  <body>
    <div class="tabCap fl">
      <div class="cp-header">
        <span>name</span>
      </div>
    </div>

    <div class="tabGrp fl">
      <div class="cp-header scroll">
        <span>tab</span>
        <span>tab</span>
        <span>tab</span>
        <span>tab</span>
        <span>tab</span>
        <span>tab</span>
        <span>tab</span>
        <span>tab</span>
        <span>tab</span>
        <span>tab</span>
      </div>
    </div>
  </body>
</html>

Update based on comment.

The margin between the span is a white space caused by the line break in the markup. This happens to all inline elements.

Here is one way to fix that, where you put the start and end tag on the same line

Updated plnkr

<span>
    tab
</span><span>
    tab
</span>

Asons · Accepted Answer · 2016-07-21 09:52:26Z

It works fine for me, check this

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1">
    <style>
        .fl2 {
            float:left;
        }

        .cp-header {
            height: 40px;
            padding: 7px 0px;
            border-bottom: 2px solid #cdcdcd;
            box-sizing: border-box;
        }

        .cp-header span {
            display: inline-block;
            border-right: 2px solid #cdcdcd;
            box-sizing: border-box;
            text-align: center;
            height: 24px;
            line-height: 24px;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div style="width: 30%; box-sizing: border-box" class="fl2">
        <div class="cp-header" style="width:100%;">
            <span style="width:100%;">name</span>
        </div>
    </div>

    <div id="tabGrp" style="width: 70%; box-sizing: border-box;" class="fl2">
        <div class="cp-header" style="width: 100%; display: inline-block; overflow-x: scroll; white-space: nowrap;">
            <span class="fl" style="width: 100px;">
                tab
            </span>
            <span class="fl" style="width: 100px;">
                tab
            </span>
            <span class="fl" style="width: 100px;">
                tab
            </span>
            <span class="fl" style="width: 100px;">
                tab
            </span>
            <span class="fl" style="width: 100px;">
                tab
            </span>
            <span class="fl" style="width: 100px;">
                tab
            </span>
            <span class="fl" style="width: 100px;">
                tab
            </span>
            <span class="fl" style="width: 100px;">
                tab
            </span>
            <span class="fl" style="width: 100px;">
                tab
            </span>
            <span class="fl" style="width: 100px;">
                tab
            </span>
            <span class="fl" style="width: 100px;">
                tab
            </span>
        </div>
    </div>
</body>
</html>

Thanks for your kind help. I have a new question. I have changed some css definition of the file, and found there is margin between each span element, the plunker link is here: margin exist between span

Collectives™ on Stack Overflow

html overflow x failed

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related