Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

flex items ignoring width

Tags:

html

css

flexbox

I've reordered some elements in my html using flexbox in the responsive design of a website which works fine but the elements then won't resize properly.

At a breakpoint I have applied a class of flex to the home-promos div and reordered the elements. This works correctly.

The problem then arises when I try to resize the div's to percentage widths. They will only resize up to a certain point, such as 50% and then won't get any bigger.

Is anyone who is better with flexbox than myself able to tell me what the issue is?

.home-promos {
  display: flex;
}
.home-promo-center {
  order: 1;
}
.home-promo-left {
  order: 2;
}
.home-promo-right {
  order: 3;
}
<div class="home-promos">
  <div class="home-promo-left">
    <div class="promo-left-content">
      *content*
    </div>
  </div>
  <div class="home-promo-center">
    <div class="promo-center-content">
      *content*
    </div>
  </div>
  <div class="home-promo-right">
    <div class="promo-right-content">
      *content*
    </div>
  </div>
</div>
like image 539
Neil K Avatar asked Jun 14 '16 14:06

Neil K


People also ask

Does Flex override width?

flex-basis is limited by both max-width/max-height and min-width/min-height. When declared, flex-basis will override the width / height property set on a flex container.

How do I make my flex item not stretch width?

By default, the child elements of a flexbox container will stretch vertically to fill the height of the container. This can be prevented by using the align-self property on the child element that you do not want to stretch. This Pen is owned by dev on CodePen.

How do you set the width of a flex item?

A flexbox item can be set to a fixed width by setting 3 CSS properties — flex-basis, flex-grow & flex-shrink. flex-basis : This property specifies the initial length of the flex item. flex-grow : This property specifies how much the flex item will grow relative to the rest of the flex items.

How can you cause a flex item to grow in size?

flex: 1 0 200px; If you have one element that has a flex-basis of 200px, flex-grow of 1, and flex-shrink of 0, this element will be at minimum 200px wide, but it will be allowed to grow if there is extra space. In this case, you can think of the flex-basis as being a minimum width.


1 Answers

When you create a flex container (display: flex or display: inline-flex), it comes with several default settings. Among them are:

  • flex-direction: row - flex items will align horizontally
  • justify-content: flex-start - flex items will stack at the start of the line
  • flex-wrap: nowrap - flex items are forced to stay in a single line
  • flex-shrink: 1 - flex items are allowed to shrink

Note the last two settings.

Your three divs are forced to remain in a single line. Hence, their combined width is limited to the width of the container.

Also, they are allowed to shrink, which prevents them from overflowing the container. This also limits their width.

To apply whatever width you want to each flex item you can override these initial settings with:

  1. flex-wrap: wrap - now there's more space because flex items can break to new lines
  2. flex-shrink: 0 - now there's more space because flex items will not shrink and can overflow their container if necessary
like image 109
Michael Benjamin Avatar answered Nov 04 '22 02:11

Michael Benjamin