I am specifying the fixed width of the child div of the container, how to prevent flexbox from changing this width when an overflow occurs?

Question

I am using flexbox. Each child div has a width:200px, my idea is that a horizontal scroll occurs when it exceeds more than 100% of the container.
For some reason, flexbox makes the elements as small as it can to avoid this overflow. How can I fix it? I need overflow horizontal, and each div with width:200px and the margin setted

.flex{
  display:flex;
  width:100%;
  background:yellow;
  align-items:center;
  flex-wrap: nowrap;
  overflow:auto;
}

.flex div{
 width:200px;
 background:red;
 margin:0px 16px;
}

<div class="flex">
  <div> hello </div>
  <div> hello </div>
  <div> hello </div>
</div>

score 1 · Accepted Answer · answered Oct 04 '21 at 05:31

1

.flex {
  display: flex;
/*  width:100%; */
  background: yellow;
  align-items: center;
  flex-wrap: nowrap;
  overflow: auto;
}

.flex div {
  width: 200px;
  flex: 0 0 auto;
  background: red;
  margin: 0px 16px;
}

<div class="flex">
  <div> hello </div>
  <div> hello </div>
  <div> hello </div>
</div>

Did you want something like this??

answered Oct 04 '21 at 05:31

Servesh Chaturvedi

524
3
10

awesome, can you please explainme why `flex: 0 0 auto`? – yavgz Oct 04 '21 at 06:01
You could read about it here https://css-tricks.com/almanac/properties/f/flex/ – Servesh Chaturvedi Oct 04 '21 at 06:53

I am specifying the fixed width of the child div of the container, how to prevent flexbox from changing this width when an overflow occurs?

1 Answers1