overflow: hidden from the middle

Question

#main {
  white-space: nowrap;
  overflow: hidden;
}

#main div {
  display: inline-block;
  heighh: 200px;
  width: 1000px;
  border: solid black;
}

        <div id="main">
          <div id="first">
            1
          </div>
          <div id="second">
            2
          </div id="third">
          <div>
            3
          </div>
        </div>

I am trying to do something in my css code. The code has 3 div objects, and the width of each one of them is 1000px. I want those 3 divs to be in the same line, so i wrote that to the father div:

white-space: nowrap;
overflow: hidden;

In each one of them I entered:

display: inline-block;

The thing is they all cut to the right, but I want them to be cut from both right and left equally. That means that if there is 10px overflow area, i want 5px to be cut to the right and 5px to the left. How can I do that?

Many thanks,

Image of what I want to achieve:

https://i.imgur.com/KV5wjwV.png the first one is the way it is looking right now the second is the desired result — Ron Rofe, Mar 23 '19 at 14:49
Add the complete code here. cannot see any output with the stuff you have added. — Harshana, Mar 23 '19 at 14:50
Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the **shortest code necessary to reproduce it** in the question itself. See: How to create a [mcve]. — Asons, Mar 23 '19 at 14:55
#main { white-space: nowrap; overflow: hidden; } #main div { display: inline-block; heighh: 200px; width: 1000px; border: solid black; }

1

2

3 — Ron Rofe, Mar 23 '19 at 14:58

eritbh · Answer 1 · 2019-04-05T00:11:51.700

I believe you can use flexbox to achieve the effect you're looking for, though it's not particularly clean, and a bit advanced for a beginner.

Instead of putting all the children inside your #main, we put them in another container right inside #main that we'll call #wrapper. We use flexbox to put all its children (#first, #second, #third) on the same line, and we make this container arbitrarily wide (in this example, 9999px) so that all of the items will fit on the same line no matter what.

Then, we use position: absolute; left: 50%; transform: translateX(-50%); to center that container within #main. Applying overflow: hidden to #main as you already had gets you the cut-off effect you're looking for.

For more information about these techniques, check out A Complete Guide to Flexbox and This question about centering with transform and absolute positioning.

#main {
  overflow: hidden;
  position: relative;
}

#wrapper {
  position: relative;
  width: 9999px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
}

#wrapper div {
  height: 200px;
  width: 400px;
  border: solid black;
}

<div id="main">
  <div id="wrapper">
    <div id="first">
      1
    </div>
    <div id="second">
      2
    </div>
    <div id="third">
      3
    </div>
  </div>
</div>

ADH - THE TECHIE GUY · Answer 2 · 2019-03-24T05:03:43.683

0

on your case you have 3 div tags with a fixed width ,so it can be easily achieved by setting margin-left of it's parent .set margin-left:calc(50%-1500px); to your parent element it will work fine, >

50% is half the width of the screen.
here 1500px is 1.5 times of width of your child elements(1000px).

here I added an example to demonstrate with child width:300px;

#main {
  white-space: nowrap;
  overflow: hidden;
  margin-left:calc(50% - 450px);
}

#main div {
  display: inline-block;
  height: 200px;
  width: 300px;
  border: solid black;
  box-sizing:border-box;
}

<div id="main">
          <div id="first">
            1
          </div>
          <div id="second">
            2
          </div >
          <div id="third">
            3
          </div>
        </div>

edited Mar 24 '19 at 05:03

answered Mar 23 '19 at 15:40

ADH - THE TECHIE GUY

4,125
3
31
54

This isn't a perfect solution, because it doesn't account for border width or the width of the space between elements that you get from `display: inline-block`, though it's probably close enough for the asker's uses. – eritbh Mar 23 '19 at 16:20
@Geo1088 border width is not a matter here because I'm added box-sizing : border-box; and the space between the blocks can be easily managed by adjusting the margin left value,I give him the basic logic. – ADH - THE TECHIE GUY Mar 23 '19 at 16:29
@Geo1088 assume if the margin between div tags are 10px then equation just change to margin-left:calc(50%-(1500px+20px)); – ADH - THE TECHIE GUY Mar 23 '19 at 16:30
Didn't notice the `box-sizing`, good call. However, there is a space between them that's always there even if you set `margin: 0` because of the way HTML whitespace is handled with `display: inline-block`. There is an actual text node between each element, containing nothing but a space, unless you have no whitespace between the child tags in HTML. This is why I almost always use flexbox for this type of thing - it ignores whitespace in the markup. – eritbh Mar 23 '19 at 17:14

score 0 · Answer 3 · answered Mar 23 '19 at 22:57

An easy solution without extra element is to simply make the container a flexbox one and center the elements:

#main {
  display: flex;
  justify-content: center; /*center to have overflow from both side*/
  overflow:hidden; /*hide the overflow*/
}

#main div {
  height: 200px;
  width: 500px;
  border: solid black;
  flex-shrink:0; /* Don't shrink element so they overflow */
}

<div id="main">
  <div id="first">
    1
  </div>
  <div id="second">
    2
  </div>
  <div id="third">
    3
  </div>
</div>

Here is some related question to better understand what is happening:

Why is a flex-child limited to parent size?

Can't scroll to top of flex item that is overflowing container

overflow: hidden from the middle

3 Answers3