Unable to make resizeable div with default width inside webkit-box flex container

Asked Apr 15 '19 at 15:00

Active Apr 15 '19 at 15:21

Viewed 19 times

I want to get a div container with default width (400px). If screen size is smaller, than that (smaller than 400px in width), then div must shrink. To do this, I'm using max-width css property:

<div class="parent_2">
    Text
</div>

.parent_2 {
    max-width: 400px;
    border: 1px solid gray;
}

And it works fine. However, in reality, my div is inside another third-party flex componet. So, in practice I have a code which looks like so:

.parent_1 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.parent_2 {
  max-width: 400px;
  border: 1px solid gray;
}

<div class="parent_1">
  <div class="parent_2">
    Text
  </div>
</div>

And it stops working - my own inner div shrinks just to the width of text. This is not what I want. I should add, that I'm not able to fix this third-party container and I am responsible just for this inner div. So,how can I fix it?

I want it to look just like so, but without tweeking or removing parent (class=parent_1) element:

.parent_2 {
  max-width: 400px;
  border: 1px solid gray;
}

<div class="parent_2">
  Text
</div>

edited Apr 15 '19 at 15:17

asked Apr 15 '19 at 15:00

Jacobian

10,122
29
128
221

`min-width:0` to parent_2 – Temani Afif Apr 15 '19 at 15:10
`min-width:0` does not work – Jacobian Apr 15 '19 at 15:11
You mark it as duplicate, but the solution you provide does not work – Jacobian Apr 15 '19 at 15:12
you want your content to shrink past the text size or you want it to also be more than the text size and start shrking at 400px? – Temani Afif Apr 15 '19 at 15:14
add `width:100%` ... (will update the duplicate) – Temani Afif Apr 15 '19 at 15:17
where should I add it? you mark it as duplicate or try to close before even checking – Jacobian Apr 15 '19 at 15:18
I checked and wrongly understand your question but I am still here to reply to your comment and will rectify my mistake by providing the correct duplicate (we all do mistakes, no?) .. you have to add it to parent_2 – Temani Afif Apr 15 '19 at 15:19
in addition to width:100% you can also use `flex-grow: 1;` – Temani Afif Apr 15 '19 at 15:21

Unable to make resizeable div with default width inside webkit-box flex container

0 Answers0