0

I have a problem I can't solve which I want to reproduce a behaviour.

This behaviour consists in, per example:

Two divs(div1 and div2) in a flexbox row with flex-wrap, where the div2 shrinks(while you're changing window size) until it reaches a specific width, and only after that, I want it to drop down(or wrap it) from div1.

The only thing I can do to happen is:

  • when I change window size from the right, it instantly drops below div1 and after that it starts to shrink.
<body>
    <div id="container">
        <div class="item" id="pri"></div>
        <div class="item" id="seg"></div> 
    </div>
</body>

/* CSS */

#container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.item {
    width: 300px;
    height: 200px;
}

.item#pri {
    background-color: red;
}

.item#seg {
    background-color: green;
    width: 600px;
    flex-shrink: 3;
    margin-right: 20px;
}
davidsbro
  • 2,761
  • 4
  • 23
  • 33
Zeddy
  • 9
  • 2
  • do you want to keep them in the same row or what, I'm sorry can you explain what exactly do you want? – Sarout Jan 27 '22 at 13:49
  • Yes, I want in the same row. I want div2 to shrink first when I'm changing window size, until it reaches a specific size it will drop below div1. Probably I can't explain well, but thank you for trying to help <3 – Zeddy Jan 27 '22 at 14:08

3 Answers3

0

Get rid of the wrap, which actually separates your divs and add min-width to the ids. Set the flex or width in percent to the one you want to shrink first and width in pixels to the second one.

I wrote some notes into code below:

    #container {
  display: flex;
  flex-direction: row;
  min-width: 500px;
  max-width: 1200px;
  background-color: violet;
  padding: 10px;
}

.item {
  height: 200px;
}

.item#pri {
  min-width:300px;
  flex: 70%; /* it will grow till 70% of the parent - but just in the moment, when there is space left*/
  background-color: red;
}

.item#seg {
  background-color: green;
  min-width:200px; /*its standart 600px, but it can shrink down to 200px, normal size has priority */
  width: 600px;
}
<div id="container">
      <div class="item" id="pri"></div>
      <div class="item" id="seg"></div> 
  </div>
Lucie
  • 185
  • 10
0
  • Use flex-wrap as wrap on the parent Element.
  • Use the third constituent flex property basis on the children Elements (300px in the below example) which will act as a "min width" — before they start to wrap.

#container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 1 0 300px; /* 300 or any desired min width */
}



#one {background: red;}
#two {background: blue;}
<div id="container">
  <div class="item" id="one">One</div>
  <div class="item" id="two">Two</div>
</div>
Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
0

I just learned with your answers. Though I didn't expose my real problem. I have a label with words on it, and next to it I have an input.

What I want to reproduce is the label staying in a specific size, and then the input with a width of 600px shrinking while window browser is getting small, and when it reaches a specific size, it drops under the label.

<label class="item" for="allwords">all these words: </label>                           
<input class="item" type="text" name="q">

I've running so many tests that my css file is all messed up. I've tried to put label and input inside of divs individually, and those divs inside of one div and playing with flexbox(parent / child).

Zeddy
  • 9
  • 2