CSS: How to Shrink First Div in Container Instead of Going Outside of Container

CSS: How to shrink first div in container instead of going outside of container (second container should be shown just after first)

It's not really clear what you are asking from this question alone but from the details of the other question it still seems as though flexbox is the solution as described by Oriol

.container {  background-color: gray;  display: flex;  overflow-x: hidden;  white-space: nowrap;  justify-content: space-between;}.first {  overflow: hidden;  text-overflow: ellipsis;  padding-right: 1em;  border: 1px solid red;}.third {  flex: 1;  text-align: right;  background:pink;}

<div class="container">  <div class="first">first div content</div>  <div class="second first">second div content</div>  <div class="third">third div content</div></div>

CSS: How to shrink first div in container instead of going outside of container

You can use flexbox:

.container {  background-color: gray;  display: flex;  justify-content: space-between;  overflow-x: hidden;  white-space: nowrap}.first {  overflow: hidden;  text-overflow: ellipsis;}

<div class="container">  <div class="first">first div content</div>  <div class="second">second div content</div></div>

How to have one item shrink fully before another starts to shrink?

flex-shrink/flex-grow

One way is to have one flexbox item flex-shrink, and to have the other grow to the size it should have with flex-grow. This way, the latter item will 'shrink' (decrease its growth) first.

More than two levels can be achieved by nesting this construction.

.flex-container {
  display: flex;
}

.first-to-shrink {
  flex-shrink: 0;
  flex-grow: 1;
  flex-basis: 0px;
  min-width: 0px;
  background: coral;
}

.second-to-shrink {
  flex-shrink: 1;
  flex-grow: 0;
  background: cornflowerblue;
}

<div class="flex-container">
  <div class="first-to-shrink flex-container">
    <div class="first-to-shrink">
      This is going to shrink first!
    </div>
    <div class="second-to-shrink">
      And then this one is going to shrink!
    </div>
  </div>
  <div class="second-to-shrink flex-container">
    <div class="first-to-shrink">
      This one is going next!
    </div>
    <div class="second-to-shrink">
      This is the last one to disappear!
    </div>
  </div>
</div>

Fixed position but relative to container

Short answer: no. (It is now possible with CSS transform. See the edit below)

Long answer: The problem with using "fixed" positioning is that it takes the element out of flow. thus it can't be re-positioned relative to its parent because it's as if it didn't have one. If, however, the container is of a fixed, known width, you can use something like:

#fixedContainer {
  position: fixed;
  width: 600px;
  height: 200px;
  left: 50%;
  top: 0%;
  margin-left: -300px; /*half the width*/
}

http://jsfiddle.net/HFjU6/1/

Edit (03/2015):

This is outdated information. It is now possible to center content of an dynamic size (horizontally and vertically) with the help of the magic of CSS3 transform. The same principle applies, but instead of using margin to offset your container, you can use translateX(-50%). This doesn't work with the above margin trick because you don't know how much to offset it unless the width is fixed and you can't use relative values (like 50%) because it will be relative to the parent and not the element it's applied to. transform behaves differently. Its values are relative to the element they are applied to. Thus, 50% for transform means half the width of the element, while 50% for margin is half of the parent's width. This is an IE9+ solution

Using similar code to the above example, I recreated the same scenario using completely dynamic width and height:

.fixedContainer {
    background-color:#ddd;
    position: fixed;
    padding: 2em;
    left: 50%;
    top: 0%;
    transform: translateX(-50%);
}

If you want it to be centered, you can do that too:

.fixedContainer {
    background-color:#ddd;
    position: fixed;
    padding: 2em;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

Demos:

jsFiddle: Centered horizontally only

jsFiddle: Centered both horizontally and vertically

Original credit goes to user aaronk6 for pointing it out to me in this answer

Make container shrink-to-fit child elements as they wrap

In CSS, the parent container doesn't know when its children wrap. Hence, it continues scaling its size oblivious to what's going on inside.

Put another way, the browser renders the container on the initial cascade. It doesn't reflow the document when a child wraps.

That's why the container doesn't shrink-wrap the narrower layout. It just continues on as if nothing wrapped, as evidenced by the reserved space on the right.

The maximum length of the horizontal white space is the length of the element(s) that the container was expecting to be there.

In the following demo, whitespace can be seen coming and going as the window is re-sized horizontally: DEMO

You'll need a JavaScript solution (see here and here)... or CSS media queries (see here).

When dealing with wrapping text, text-align: right on the container may be helpful in some cases.

Flexbox going outside its container

The problem here is that you're setting the buttons to shrink, while explicitly telling the title not to shrink. That means that the title will grab all of the space. Now, if you set flex: 1; on the title and remove flex: 0 1 auto; and flex-basis: content; from the buttons, it works as expected: the buttons are always shown and the content of the title is wrapped.

See the modified codepen.

When you're setting flex: 1 0 auto; you're enabling the growth (1) of a flex item and disabling its shrinking (0). So the browser will never shrink the title element in order to make room for the buttons.

When using flex: 0 1 auto; you're telling the browser that the flex item is not really important and, when there's not enough room, the flex item should shrink to make room for other elements.

Here's what my solution does:

• it sets flex: 1; on the title, which tells the browser that the element can expand and can shrink; it also instructs to grab as much available space as possible;
• the default values for the flex shorthand are 0 1 auto, which is not really needed;
• finally, flex-basis: content is not really supported; see here.

Make DIV container with list in it shrink when changing the browser window

There are several ways to do it.
1)Instead of % and pixels, use vw(view width) a unit which is calculated on viewport and add min width to the li.
Eg.

/* Change the unit values as per your project */
.li{
    width : 10vh;
    min-width : 100px;
}
.taskbarimages{
     Width : 100%;
}

2)Use media queries and set height for different screen sizes.
Eg.

@media(700px){
      .li{
          Width : 150px;
      }
}

3)Use frameworks like bootstrap,bulma,skeleton.

---

Related Topics