How to Prevent Child's Content from Stretching Parent's Width

How to prevent child's content from stretching parent's width

Try width:0;min-width:100%; on the message container:

.box {

  display: table;

  margin: auto;

  border: 1px solid black;

}

.container {

  display: flex;

  justify-content: center;

}

.icon {

  margin-right: 10px;

}

message {

  display:block;

  width:0;

  min-width:100%;

}

<div class='box'>

  <div class='container'>

    <div class='icon'>

      X

    </div>

    <div class='content'>

      <div class='title'>

        Some title

      </div>

      <message>

        <div>Long message that should not make parent wider</div>

      </message>

    </div>

  </div>

</div>

Prevent child element from stretching parent: portable solution for both Chrome & Safari?

Here is a simplified example (I removed a couple elements from your code just to make it easier to read). The scroll element needs two things: a parent with overflow:hidden, and an ancestor with a height property (can't be auto). Then to center the non-overflowing content, just use flexbox on the parent, and margin:auto on the content element.

*** UPDATE

A better explanation of what is going on with your code:

1. You want to center a content block while making the parent hide its overflow if any.
2. For overflow to work it needs a parent with a height otherwise it will not know where to cut off the content.
3. To vertically center the content box within the available space, set the parent to display:flex.
4. The important part: the content block has to be centered using margin:auto otherwise when there is overflow, it will remain centered with its top and bottom parts being cut-off by the parent's overflow:hidden.

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
}

.page {
  /* Set height for overflow element ancestor */
  height: 100%;
  max-height: 100vh;
  display: flex;
  background: blue;
  justify-content: center;
}

.central-column {
  flex-basis: 100%;
  max-width: 90%;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.topbar {
  height: 20%;
  flex-shrink: 0;
  background: red;
}

.cardbar {
  flex-grow: 1;
  display: flex;
  /* Parent of the scroll element hide overflow */
  overflow: hidden;
}

.cardtable {
  padding: 20px;
  background: white;
  display: flex;
  flex-basis: 100%;
}

.card {
  background: cyan;
  padding: 30px;
  /* Margin auto to center the content */
  margin: auto;
  text-align: center;
}

.bottombar {
  height: 20%;
  flex-shrink: 0;
  background: red;
}

<div class="page">
  <div class="central-column">
    <div class="topbar">
    </div>
    <div class="cardbar">
      <div class="cardtable">
        <div class="card">
          <div class="content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
          </div>
        </div>
      </div>
    </div>
    <div class="bottombar"></div>
  </div>
</div>

Why isn't parent div width stretching to width of child

Set #content to inline-block, and then set min-width to 100%. Note that setting width to 100% won't have the desired affect.

#content {
    background: #ff0000;
    min-height: 200px;
    min-width: 100%;
    display:inline-block;
}

Trick to prevent child from stretching parent flexbox doesn't work on all browsers

Looks like the solution is:

Don't use the trick!

If you replace height: 0; with a simple flex: 1 1 0, it will work perfectly.
Just remember to not add the % symbol to the trailing 0 (which is the default behavior if you use the shorthand flex: 1).

Stretch fixed to bottom parent div to div child's width

Here you go: http://codepen.io/n3ptun3/pen/PPgWNb

You don't need to use display: inline-block.

I've left your HTML alone, and simplified some of your CSS: .card-container and .footer don't need float: left; and width: 100%;. They are both block-level elements so they will take up 100% of the width, and they don't need anything to wrap around them.

On the .main-container, you can't set margin: 0 auto; and position: fixed;. position: fixed; removes the ability for centering via margin. left: 0; and right: 0; were stretching the size of the main container, so those need to be removed. width: 100%; and max-width: 400px; were trying to fix the width issue, but that wouldn't allow resizing based on content.

Instead you need to set left: 50%; (places left edge of element at 50% of the parent's width, i.e. the viewport width, in this case) and then transform: translate(-50%); to bring the element back toward the left by 50% of its width. Thus bringing the element to the center of the window/viewport.

Now, if you remove one of the "cards," it will resize the "main-container," while keeping everything fixed to the bottom and centered.

.main-container {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
  box-shadow: 0 0 15px #B3B3B3;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  text-align: center;
}

.card-container {
  color: #3B3D3D;
  height: 105px;
}

.card {
  width: 100px;
  float: left;
}

.footer {
  color: #FFFFFF;
  background: #0095D3;
  height: 45px;
}

EDIT: Based on your new information (re: the increased width or added "cards"), I've found that the issue lies with the left position on the .main-container. When you position the element by 50% and its width is more than 50% of the parent, it runs into the right side of the parent div, and you get the stacking. To fix this, you can instead remove the float: left; on .card and add display: flex; on .card-container. This will allow you to increase the width of the "cards" while keeping them from stacking.

I've updated the code here: http://codepen.io/n3ptun3/pen/PPgWNb

.main-container {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
  box-shadow: 0 0 15px #B3B3B3;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  text-align: center;
}

.card-container {
  color: #3B3D3D;
  height: 105px;
  display: flex;
}

.card {
  width: 100px;
  //  float: left;
}

.footer {
  color: #FFFFFF;
  background: #0095D3;
  height: 45px;

}

How to prevent a dynamic width flexbox child from overflowing the parent?

You hit the min-width algorithm, where the min-width of a flex item defaults to auto and as such doesn't allow it to shrink below its content.

You can use word-break: break-all

#flex-parent {

  display: flex;

  width: 200px;

  background: green;

  padding: 10px;

}

#fixed-child {

  width: 20;

  background: red

}

#stretched-child {

  background: yellow;

  word-wrap: break-word;

  word-break: break-all;

}

<div id="flex-parent">

  <div id="fixed-child">

    FIXED

  </div>

  <div id="stretched-child">

    STREEEEEEEEEEEEEEEEEEEEEEEEEEEECHED

  </div>

</div>

Absolute child not stretching to contents size inside a absolute parent

You can use the style width:max-content to get desired full width of your container.

.floating-bar {

  position: absolute;

  z-index: 1;

  background-color: lightblue;

  height: 50px;

  padding: 5px;

}

.button-menu {

  max-width: 200px;

  background-color: yellow;

  padding: 10px;

  position: absolute;

  z-index: 2;

  display: none;

  width: max-content;

  width: -moz-max-content;

}

.button {

  background-color: blue;

  color: white;

  width: 35px;

  height: 50px;

}

.button:hover + .button-menu {

    display: block;

}

<div class="floating-bar">

    <div class="button">A</div>

    <div class="button-menu">

      <ul>

        <li>Lorem ipsm dolor sit amet</li>

        <li>Lorem ipsm dolor sit amet</li>

        <li>Lorem ipsm dolor sit amet</li>

      </ul>

    </div>

</div>

---

Related Topics