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, Mar 29 '18 at 06:33
@AEX you want it to come out of the whitebox and overflow to left? — Shrihari Balasubramani, Mar 29 '18 at 06: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, Mar 29 '18 at 06:37
@ShrihariBalasubramani I want it to have it overflow (hidden) to the left, like in the picture. So I want the right most part always visible and the left part to "slide". — AEX, Mar 29 '18 at 06:39
@Anuresh I don't know .. whatever works - If I knew I wouldn't be asking. — AEX, Mar 29 '18 at 07:09
You've already got your answer, But I'll advise you to use bootstrap for your future work, It'll help you a lot, save your time and very easy to learn and use. — Zara Khan, Mar 29 '18 at 07:47

score 3 · Answer 1 · answered Mar 29 '18 at 07:19

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>

This works, thanks! Only reason I chose other approach as answer is because it was posted first. — AEX, Mar 29 '18 at 08:03
This actually doesn't work :( ... if .outer-div { max-width: 600 } it will be obvious why ... it floats right, it doesn't float left. — AEX, Apr 08 '18 at 09:34

Vijay Dev · Accepted Answer · 2018-03-29T07:26:24.427

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

score 0 · Answer 3 · answered Mar 29 '18 at 07:17

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>

CSS: Float left & overflow left

3 Answers3