0

I have a flexbox and I want want it's items to have a width of 200px but it doesn't go over 500/5 = 100px.

I set the min-width to 200px and it worked, but I don't know why width didn't work. Could someone explain to me why it happened? I don't know much about flexbox (or anything in CS or CSS for that matter) so please go light on the technical jargon.

Thanks!

My code:

HTML

  <h3>width/height</h3>
    <div class="flex-container two">
        <div class="flex-item">Item</div>
        <div class="flex-item">Item</div>
        <div class="flex-item">Item</div>
        <div class="flex-item">Item</div>
        <div class="flex-item">Item</div>
    </div>

CSS

.flex-container {
    font-size:14px;
    display:flex;
    margin-bottom:2rem;
    width:500px;
}

.flex-container.two > .flex-item {
    width:200px;
}
Web Knowledge
  • 1
  • 3

1 Answers1

1

you gave the parent a width of 500px and children of 200px, how can they fit? my suggestion is to set the parent's width to fit-content if you want children to have that exact width... and if you want them to overflow and have the exact width you gave them(200px) use flex-shrink: 0 ;

.flex-container {
  font-size: 14px;
  display: flex;
  margin-bottom: 2rem;
  width: 500px;
}

.flex-container.two > .flex-item {
  flex-shrink: 0;
  width: 200px;
}
<h3>width/height</h3>
<div class="flex-container two">
  <div class="flex-item">Item</div>
  <div class="flex-item">Item</div>
  <div class="flex-item">Item</div>
  <div class="flex-item">Item</div>
  <div class="flex-item">Item</div>
</div>
Steve Walson
  • 450
  • 3
  • 7
  • Actually I don't want it to fit, I want to see it overflow. My question is why ISNT it overflowing. Normally it would overflow the container, but now, it isn't. – Web Knowledge May 21 '22 at 12:32
  • I've edited the code, the parent div was shrinking the width of children. and with setting the flex-shrink to 0, children will be having the full width you set to them. – Steve Walson May 21 '22 at 13:34