Flex Box Container Width Doesn't Grow

flexbox form not filling up full width of available space

Ok I figured it out you do it on the child

.form-container {
  background-color: red;
}

.search-form {
  display: flex;
  align-items: flex-start;
}

.sesrch-form label {
  flex-grow: 1;
}

<div class="form-container">
  <form role="search" method="get" class="search-form" action="/">
    <label>
      <span class="screen-reader-text">Test form</span>
      <input type="search" class="search-field" placeholder="field" value="search" name="s" title="search input" />
    </label>
    <input type="submit" class="search-submit button" value="search" />
  </form>
</div>

Flexbox row: doesn't grow according to content?

If you want your container to always match the width of it's children, you'll need to look into display: inline-flex.

display: flex behaves more like a container with a width of 100%

Here's a fiddle that should work:
http://jsfiddle.net/hnrs64fm/

Why doesn't a nested flexbox grow to full width?

The lightblue div is actually a flex item. The default properties of flex items are:

flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;

So the item won't grow to fill the remaining space, it would shrink, and look at my width or height property for basis.

flex-grow doesn't display items in container in full width

As I commented above you need to fix your code like this in order to have 2 items per row:

ul {

  display: flex;

  flex-wrap: wrap;

  margin: 0;

  padding: 0;

  list-style: none;

}

ul li {

  box-sizing: border-box;

  font-size: 13px;

  border: 1px solid #000;

  line-height: 2.3; 

  flex: 0 1 50%; /* Or flex-basis:50% Or width:50% */

  padding: 0;

}

<ul>

  <li>aaaa</li>

  <li>bbb</li>

  <li>cccc</li>

  <li>ddd</li>

</ul>

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>

Do not fill the width of growable flex containers

I think it would be better to use css grid instead:

* {
  box-sizing: border-box;
  margin: 0;
  padding:0;
}

article {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;

  width: 800px;
  padding: 10px;
  border: 1px solid blue;
}

section {
  padding: 10px;
  border: 1px solid black;
}

Width of flex-container doesn't expand when flex item contains a variable width image

Try adding a percentage height to the image container.

The image is already flexible, because its dimensions are set in percentages. With a percentage height on the container, it becomes flexible, as well.

jsfiddle demo

.flex {

  display: inline-flex;

  background-color: deeppink;

  height: calc(100vh - 20px);

  border: 10px solid deeppink;

}

.flex-left {

  width: 250px;

}

.flex-right {

  height: 100%;

}

img {

  max-width: 100%;

  max-height: 100%;

}

<div class="flex">

  <div class="flex-left">

    <h2>Testing headline</h2>

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus quia nemo qui ipsam? Temporibus sint necessitatibus expedita, eum quae tempora voluptas dolore facere voluptate! Possimus molestias non commodi. Officiis, iste?</p>

  </div>

  <div class="flex-right">

    <img src="http://unsplash.it/1000/650" alt="Sample Image">

  </div>

</div>

---

Related Topics