0

I have a parent div, there are two divs inside it. Div .child-long has a width set as a percentage, and div .child-short has a static width set in pixels.

How to make .child-long not "shrink" .child-short but shrinks itself?

.parent{
  width: 100%;
  height: 200px;
  border: solid green 2px;
  margin: 10px;
  padding: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.child-long{
  height: 100%;
  width: 90%;
  background-color: red;
}
.child-short{
  height: 100%;
  width: 400px;
  background-color: green;
}
<div class="parent">
  <div class="child-long"></div>
  <div class="child-short"></div>
</div>
Rumata
  • 1,027
  • 3
  • 16
  • 47
  • 1
    did you try using `min-width` instead of `width` for `.child-long` ? – Asmoth Oct 27 '22 at 18:24
  • 2
    try adding `width: calc(100% - 400px)` to your `.child-long`. You are then saying that you want it to take all the available space inside the parent div, but leaving 400px place for the .child-short – Boguz Oct 27 '22 at 18:33
  • @Asmoth Thank you, min-width didn't work for me for some reason, but maybe I used it wrong – Rumata Oct 27 '22 at 19:11
  • @Boguz Thank you, eventually I decided to use percentage for both containers XD But I like the calc() solution, can you please add it as an answer? – Rumata Oct 27 '22 at 19:12
  • 1
    keep width on short, remove width from long and replace it with flex:1 – Temani Afif Oct 27 '22 at 20:28
  • 1
    OR keep everything and add flex-shrink: 0 to the short – Temani Afif Oct 27 '22 at 20:29

0 Answers0