CSS: Float left & overflow left

Question

This image should be self explanatory.

Basically, I'm trying to have a div behaving as follows:

When there is enough space for the entire div to be displayed, the entire div will display, floating to the left.
When there is not enough space, the div should overflow hidden to the left.

If CSS can't do this alone, do you have a link to similar working JS ?

JSFiddle that I'm trying to use to figure out: https://jsfiddle.net/375fmu1q/164/

<div class="outer-div">
    <div class="inner-div">
        <div class="part1">
            This is part 1 -
    </div>
        <div class="part2">
            This is part 2 -
    </div>
        <div class="part3">
            This is part 3 -
    </div>
        <div class="part4">
            This is part 4
    </div>
    </div>
</div>

@ShrihariBalasubramani That works for not overflowing multiple lines, but doesn't help with end goal - overflowing left. — AEX
– AEX, Commented Mar 29, 2018 at 6:33
@AEX you want it to come out of the whitebox and overflow to left? — Shrihari Balasubramani
– Shrihari Balasubramani, Commented Mar 29, 2018 at 6:36
@ZaraJamshaid Heard of it - haven't used it. Interested in anything that would work for this scenario. Pls link anything that fits the behavior. — AEX
– AEX, Commented Mar 29, 2018 at 6:37

Athul Nath · Accepted Answer · 2018-03-29 07:19:59Z

3

One way you can do this by direction:rtl Refer : Here

With Flexbox using flex-flow: row-reverse;

body {margin:0;}
.outer-div {
  white-space:nowrap;
  overflow: hidden;
  display: flex;
  flex-flow: row-reverse;
  max-width: 400px;
}
.inner-div {
  display:flex;
}
.part {
  padding: 10px;
}
.part1 {
  background-color:red;
}
.part2 {
  background-color:blue;
}
.part3 {
  background-color:green;
}
.part4 {
  background-color:yellow;
}

<div class="outer-div">
  <div class="inner-div">     
    <div class="part part1">
    This is part 1 
    </div>  
    <div class="part part2">
    This is part 2 
    </div>  
    <div class="part part3">
     This is part 3 
    </div>  
    <div class="part part4">
    This is part 4 
    </div>
  </div>
</div>

answered Mar 29, 2018 at 7:19

Athul Nath

2,6061 gold badge19 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

AEX Over a year ago

This works, thanks! Only reason I chose other approach as answer is because it was posted first.

AEX Over a year ago

This actually doesn't work :( ... if .outer-div { max-width: 600 } it will be obvious why ... it floats right, it doesn't float left.

Vijay Dev · Accepted Answer · 2018-03-29 07:26:24Z

There is one possible solution to your problem. This requires both CSS and JS to work. The outer and inner div should have the following understanding:

.outer-div {
    position: relative;
    // padding-top: <height of .inner-div>
}
.inner-div {
    position: absolute;
    left: 0;
    top: 0;
}

This will have the same effect as float: left. This is how the styles should work during normal size, i:e .outer-div width is greater than the .inner-div width. Now we are going to write a JS code that will detect if this condition has changed and apply the difference as negative left to achieve your desired effect.

const onResizeOrDetectChange = () => {
    const outerDiv = document.querySelector('.outer-div');
    const innerDiv = document.querySelector('.inner-div');
    const widthDiff = outerDiv.offsetWidth - innerDiv.offsetWidth

    // will be less than 0 when outer div width is less than inner div width
    if (widthDiff < 0) {
        innerDiv.style.left = widthDiff + 'px'
    } else {
        innerDiv.style.left = 0
    }
}

Call onResizeOrDetectChange when screen resize or any event where you would like to adjust and it can produce the desired effect you are looking for.

Here is the modified fiddle: https://jsfiddle.net/o7m7bo60/8/. I have used flex-box styling as compared to your float: left to make the .inner-div stay in one line

Yeasin01 · Accepted Answer · 2018-03-29 07:17:50Z

You can use display flex to solve this problem. See the code below. This will solve your problem.

.outer-div {
  white-space:nowrap;
}

.inner-div {
  display: inline-block;
  overflow:hidden;
  white-space:nowrap;
  display: flex;
  flex-wrap: wrap;
}
.inner-div > div {
  flex: 0 0 auto;
}

.part1 {
  display:inline-block;
  float:left;
  background-color:red;
  white-space:nowrap;
}
.part2 {
  display:inline-block;
  float:left;
  background-color:blue;
  white-space:nowrap;
}
.part3 {
  display:inline-block;
  float:left;
  background-color:green;
  white-space:nowrap;
}
.part4 {
  display:inline-block;
  float:left;
  background-color:yellow;
  white-space:nowrap;
}

<div class="outer-div">
  <div class="inner-div">     
    <div class="part1">
    This is part 1 -
    </div>  
    <div class="part2">
    This is part 2 -
    </div>  
    <div class="part3">
     This is part 3 -
    </div>  
    <div class="part4">
    This is part 4 
    </div> 
    <div class="part1">
    This is part 1 -
    </div>  
    <div class="part2">
    This is part 2 -
    </div>  
    <div class="part3">
     This is part 3 -
    </div>  
    <div class="part4">
    This is part 4 
    </div> 
    <div class="part1">
    This is part 1 -
    </div>  
    <div class="part2">
    This is part 2 -
    </div>  
    <div class="part3">
     This is part 3 -
    </div>  
    <div class="part4">
    This is part 4 
    </div> 
  </div>
</div>

Collectives™ on Stack Overflow

CSS: Float left & overflow left

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related