CODEWITHSUNDEEP
htmlcssoverflow
StackThis
StackThis

Reputation: 883

{overflow-x : auto;} is overflowing vertically?

I have a grid of div-boxes that vary in height and width: http://jsfiddle.net/9cnDS/

A few of them should be overflowing horizontally with overflow-x:auto, but they're overflowing vertically?..

The {{message}} should stay on 1 line, and when it is longer than the standard width of the box, the text should auto overflow horizontally

<div class="col2">
    <div class="box9 border">
      <div class="message">
        <blockquote>
          <div class="moreLeft">{{message}}</div>
        </blockquote>
      </div>
    </div>
</div>

Here's the css:

.col2 {
  width: 65%;
  height:100%;
}
.box9 {
  height:15%;
  overflow-x: auto;
}
.moreLeft {
    margin-left: -2%;
}
.message {
    padding-top: 3.5%;
    text-align: center;
}
blockquote {
  height: 40px;
  width: auto;
  padding: 5px 10px;
  margin: 0 0 20px;
  font-size: 1.5vw;
  border-left: 11px solid #000;
}

Upvotes: 1

Views: 142

Answers (3)

iamnotsam
iamnotsam

Reputation: 10380

.box9 {
  overflow: hidden;
  overflow-x: auto;
  white-space: nowrap;
}

This helps unless I'm misunderstanding your issue completely.

Upvotes: 2

Core972
Core972

Reputation: 4114

With white-space and overflow-y you should be fine:

.box9 {
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}

Upvotes: 1

Kevin Boucher
Kevin Boucher

Reputation: 16675

Not sure what you are trying to do exactly, but adding white-space: nowrap will prevent the text from overflowing vertically:

.box9 {
    overflow-x: auto;
    white-space: nowrap;
}

Upvotes: 3

Related Questions