Make Flex Item Full Width After It's Been Wrapped Without Using Media Queries

Make flex item full width after it's been wrapped without using media queries

You can not do that. But you can get pretty close.

Just set the grow on the flex item to a huge value (9999) and grow on the wrap item to 1

 .flexContainer {    display:flex;    flex-wrap:wrap;    border: 1px solid;  }  .img {    width:110px;    height:110px;    background:red;  }  .flexItem {    flex-basis:200px;    flex-grow:9999;    background:#ff1;  }  .wrapItem {    flex-basis:100px;    flex-grow:1;    background:#aab;  }

  <body>    <div class="flexContainer">      <div class="img">fixed size img here</div>      <div class="flexItem">This flexes</div>      <div class="wrapItem">This wraps</div>    </div>  </body>

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>

CSS: How can I ensure flex items wrap to the next line--after the first item--at a certain screen width?

Use the media query to apply flex-wrap:wrap on the flex container and flex:0 0 100% on the first child.

This way you don't need additional HTML markup, and no need to change anything on your code but the media query.

@media (max-width: 800px) {
  .cart-cb{
    flex-wrap:wrap;
  }
  .cart-cb div{
    flex: 0 0 100%;
    text-align:right;
  }
}

https://jsfiddle.net/378b4yLy/

Flexbox and responsiveness Issue. How to get items to wrap and then take up the full width of their new space without overflow?

I've added a media query to change flex-direction to row for the parent then changed the bottom bar to width:auto and flex-grow:1 so it stretches to fit the parent. Is that what you're looking for?

.wrapper {
  --width-top-left: 20px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 60px;
}

.top-left {
  height: 30px;
  width: var(--width-top-left);
}

.bottom {
  height: 22px;
  margin-top: auto;
  width: 100%;
}

.wrapper {
  border: thin solid goldenrod;
  position: relative;
}

.bottom {
  text-align: center;
  background: lightcoral;
}

.top-left {
  background: mediumslateblue;
}

.top-right {
  position: absolute;
  top: 0;
  right: 0;
  background: mediumseagreen;
  height: 20px;
  width: 30px;
}

.shrunkenview {
  display: none;
}

@media only screen and (max-width:800px) {
  .wrapper {
    flex-direction: row;
  }
  .top-left {
    height: 100%;
  }
  .bottom {
    width: auto;
    flex-grow: 1;
  }
  .initialview {
    display: none;
  }
  .shrunkenview {
    display: unset;
  }
}

<div class="wrapper">
  <div class="top-left"></div>
  <div class="top-right"></div>
  <div class="bottom"><span class='shrunkenview'>Shrunken View</span><span class='initialview'>InitialView</span>
  </div>

Width property on flex item not recognized in media query

Yes, you have .middle set to width: 70% in your media query.

But you also have .middle set to flex: 2 20% higher up in the code.

This rule is not in a media query, so it is always applied. It computes to:

flex-grow: 2
flex-shrink: 1
flex-basis: 20%

When your media query kicks-in, width: 70% overrides the flex-basis: 20%.

But flex-grow: 2 and flex-shrink: 1 remain intact, because you've got nothing stopping them.

So, the browser first applies width: 70%, and then flex-grow: 2, which consumes any remaining space on the line. (Hence, the content expands "edge to edge".)

Make this adjustment in your media query:

Instead of...

.middle { width: 70%`; }

use

.middle { flex: 0 0 70%; }

.middle { width: 70%; flex-grow: 0; flex-shrink: 0; }

This will override all components of the other declaration.

Make Flex Item Full Width After It's Been Wrapped Without Using Media Queries