CSS Prevent Div Flex from Stretching Child

CSS prevent div flex from stretching child

add another wrapper:

div {
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align:center;
  height: 200px;
  width: 100px;
}

p span{
  background-color: green;
}

<div>
  <p>
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</span>
  </p>
</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>

Prevent flex items from stretching

You don't want to stretch the span in height?

You have the possiblity to affect one or more flex-items to don't stretch the full height of the container.

To affect all flex-items of the container, choose this:
You have to set align-items: flex-start; to div and all flex-items of this container get the height of their content.

div {  align-items: flex-start;  background: tan;  display: flex;  height: 200px;}span {  background: red;}

<div>  <span>This is some text.</span></div>

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>

How to prevent flex-items from overflowing flex parent with no wrap?

Set display: inline-flex on the .parent class to change it to an inline element. This will also force the .parent to expand to contain its children. Then by setting min-width: 100% on the .parent class, it will force it to expand to 100% of the containing element.

.parent {
  display: inline-flex;
  flex-direction: row;
  background-color: red;
  min-width: 100%;
}
.child {
  min-width: 100px;
  flex-basis: 0px;
  flex-grow: 1;

  margin: 5px;
  height: 100px;
  background-color: blue;
}

css flex column prevent child elements stretch from each other's content

You could simply do this

<div id="container">
    <div class="a"><span>b</span></div>
    <div class="b"><span>wwww</span></div>
</div>

and style you background or anything else on the child span rather than the flexed .a

.a span{
  background: green;
}

Fiddle Here

---

Related Topics