Force Flex Item to Span Full Row Width

Force flex item to span full row width

When you want a flex item to occupy an entire row, set it to width: 100% or flex-basis: 100%, and enable wrap on the container.

The item now consumes all available space. Siblings are forced on to other rows.

.parent {
  display: flex;
  flex-wrap: wrap;
}

#range, #text {
  flex: 1;
}

.error {
  flex: 0 0 100%; /* flex-grow, flex-shrink, flex-basis */
  border: 1px dashed black;
}

<div class="parent">
  <input type="range" id="range">
  <input type="text" id="text">
  <label class="error">Error message (takes full width)</label>
</div>

Flexbox not full width

The container actually is 100% wide, i.e. spans the full width of the window. But with the default flex settings, its children will simply align left and will be only as wide as their contents.

However, if you apply flex-grow: 1; to the child elements to allow them to get wider, they will stretch and fill the full width of the container.

.masonry_container {
  display: flex;
}

.masonry_left_col {
  border: 1px solid grey;
  flex-grow: 1;
}

.masonry_right_col {
  border: 1px solid grey;
  flex-grow: 1;
}

<div class="masonry_container">

  <div class="masonry_left_col">
    Content
  </div>

  <div class="masonry_right_col">
    Content
  </div>

</div>

Flexbox - Align 2 items in a row and third item next row full width

you can do this.

.container {      display: flex;      flex-wrap: wrap;}
.container div { height: 20px; }
.div1, .div2 {  flex: 0 0 50%;}div.div3{   flex: 0 0 100%;  }
div.div1 { background-color:green;}
div.div2 { background-color: yellow;}
div.div3 { background-color: red;}

<div class="container">  <div class="div1"></div>  <div class="div2"></div>  <div class="div3"></div></div>

Unable to get flex row to appear on new line full width

Simply make it width:100% and add flex-wrap:wrap to container:

.container {  display: flex;  width: 400px;  height: 40px;  border: 1px solid blue;  flex-wrap:wrap;}
.container > div {  height: 20px;}
.dragHandle {  flex: 0 0 20px;  background-color: rgba(0,0,0,0.2);}
.checkbox {  flex: 0 0 30px;  background-color: rgba(0,0,0,0.3);}
.input {  flex: 0 0 auto;  flex-grow: 1;  background-color: rgba(0,0,0,0.1);}
.avatar {  flex: 0 0 30px;  background-color: rgba(0,0,0,0.3);}
.footer {  width:100%; /* Or flex: 0 1 100% Or flex-basis:100%*/}

<div class="container">  <div class="dragHandle"></div>  <div class="checkbox"><input type="checkbox" ></div>  <div class="input">Task title</div>  <div class="avatar"></div>  <div class="footer">0 of 2 completed</div></div>

Make flex items take content width, not width of parent container

Use align-items: flex-start on the container, or align-self: flex-start on the flex items.

No need for display: inline-flex.

An initial setting of a flex container is align-items: stretch. This means that flex items will expand to cover the full length of the container along the cross axis.

The align-self property does the same thing as align-items, except that align-self applies to flex items while align-items applies to the flex container.

By default, align-self inherits the value of align-items.

Since your container is flex-direction: column, the cross axis is horizontal, and align-items: stretch is expanding the child element's width as much as it can.

You can override the default with align-items: flex-start on the container (which is inherited by all flex items) or align-self: flex-start on the item (which is confined to the single item).

Learn more about flex alignment along the cross axis here:

How does flex-wrap work with align-self, align-items and align-content?

Learn more about flex alignment along the main axis here:

In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

CSS Flex Box Layout: full-width row and columns

You've almost done it. However setting flex: 0 0 <basis> declaration to the columns would prevent them from growing/shrinking; And the <basis> parameter would define the width of columns.

In addition, you could use CSS3 calc() expression to specify the height of columns with the respect to the height of the header.

#productShowcaseTitle {
  flex: 0 0 100%; /* Let it fill the entire space horizontally */
  height: 100px;
}

#productShowcaseDetail,
#productShowcaseThumbnailContainer {
  height: calc(100% - 100px); /* excluding the height of the header */
}

#productShowcaseContainer {  display: flex;  flex-flow: row wrap;
  height: 600px;  width: 580px;}
#productShowcaseTitle {  flex: 0 0 100%; /* Let it fill the entire space horizontally */  height: 100px;  background-color: silver;}
#productShowcaseDetail {  flex: 0 0 66%; /* ~ 2 * 33.33% */  height: calc(100% - 100px); /* excluding the height of the header */  background-color: lightgray;}
#productShowcaseThumbnailContainer {  flex: 0 0 34%;  /* ~ 33.33% */  height: calc(100% - 100px); /* excluding the height of the header */  background-color: black;}

<div id="productShowcaseContainer">  <div id="productShowcaseTitle"></div>  <div id="productShowcaseDetail"></div>  <div id="productShowcaseThumbnailContainer"></div></div>

Make a flex item act like display block

You should add a flex-basis: 100% to #menu, and allow the gray items to go to a new line by applying flex-wrap: wrap; to #container:

#container {  display: flex;  flex-wrap: wrap;}
#menu {  display: flex;  flex-basis: 100%;}
#menu p {  margin: 0;  padding: 8px;  padding-bottom: 0;}
.otherDivs {  height: 700px;  width: 10%;  background-color: grey;  margin-right: 5px;}

<div id="container">
  <div id="menu">
    <p>Btn</p>    <p>Btn</p>    <p>Btn</p>
  </div>
  <div class="otherDivs"></div>  <div class="otherDivs"></div>  <div class="otherDivs"></div>
</div>

Stop flex child from being full width

You can simply set align-self: flex-start to the class .resource-item__link. In this solution the hyperlink elements (<a>) are all on the same level and not placed directly under the content of each column (.col).

.row {
  display: flex;
  flex-direction: row;
}
.col {
  display: flex;
  flex-direction: column;
  padding: 0 0 15px 0;
  margin: 0 19px 65px;
  width: calc((100% / 3) - 38px);
  background: red; 
}
.col .resource-item__title {
  font-weight: bolder; 
}
.col .resource-item__summary {
  margin: 0 0 5px 0;
}
.col .resource-item__link {
  align-self:flex-start;
  background: yellow;
  margin-top: auto;
}
.col .resource-item__icon {
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
  color: green;
  font-size: 22px;
  cursor: default;
}
.col .resource-item__icon.disabledIcon {
  color: red; 
}

<div class="row">
  <div class="col">
    <h4 class="resource-item__title">Shale Gas Briefing Final</h4>
    <p class="resource-item__summary">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live ...</p>
    <a class="resource-item__link" href="test-page-/114954ad-b674-4ad7-b90c-00e26bad10ed">view</a>
  </div>
  <div class="col">
    <h4 class="resource-item__title">Shale Gas Briefing Final</h4>
    <p class="resource-item__summary">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live ...</p>
    <a class="resource-item__link" href="test-page-/114954ad-b674-4ad7-b90c-00e26bad10ed">Download</a>
  </div>
  <div class="col">
    <h4 class="resource-item__title">Shale Gas Briefing Final</h4>
    <p class="resource-item__summary">Far sadsa das das das das dfar away, behind the word mountains, far from the countries Vokalia hgghk hkj hkljand Consonantia, there live ...</p>
    <a class="resource-item__link" href="test-page-/114954ad-b674-4ad7-b90c-00e26bad10ed">Download</a>
  </div>
</div>

how to make child in flex go full width?

This is the right way to achieve that:

.dashboard-body{  text-align:center;  width: 300px;  margin: 0 auto;}.btn-group{  display:flex;  flex-direction:row;  justify-content: space-between;}.btn-group a{  flex:0 0 auto;}

<div class="dashboard-body">  <p>You don't have any sales data.</p>  <p>Please add a new book or upload CSVs.</p>
  <div class="btn-group">    <a href="#">      <input class="add-new-book-btn" type="submit" value="Add New Book">    </a>    <a href="#">      <input class="add-new-book-btn" type="submit" value="Upload CSV">    </a>  </div></div>

Force Flex Item to Span Full Row Width