1

I'm building a one line input control that mixes user edited text and non-editable blocks. I want to make easy for user to click on the first or last editable item and have the browser put focus into the element. For that, I need to set min-width:5px for the first item and width:100% for the last item like this:

<div class="app">
  <div class="el1" contenteditable="true">should not collapse</div>
  <div class="el2">block</div>
  <div class="el3" contenteditable="true">should take 100% width</div>
</div>

.app { display: flex; }
.el1 { min-width: 5px; }
.el3 { width: 100%; }
.el2 { background-color: aquamarine; padding: 5px; }

However, the first time collapses on white-space. I've tried both flex-wrap: nowrap; on .app and white-space: nowrap; on .el1, but it doesn't give me the desired result.

Updates

It seems to be enough to set flex-shrink:0 for the .el1 as by default it's set to flex-shrink:1 and so as I understand it allows collapsing. But I'm not sure that's the way to go. Anyone can confirm?

Max Koretskyi
  • 101,079
  • 60
  • 333
  • 488

1 Answers1

1

Try to give the first collapsing box the following style

.el1 {
  flex: 0 0 auto;
}

And it will not collapse anymore and it will take its text width.

Abdelrahman Hatem
  • 1,028
  • 1
  • 9
  • 20
  • I can't use `130px` because I want it to grow as I type in text – Max Koretskyi Sep 18 '21 at 06:42
  • Correct me if i'm wrong , you want when user clicks on the editable input then this input takes all the width, right? – Abdelrahman Hatem Sep 18 '21 at 06:46
  • 1
    first input or the last input? For the first input I want to take as much space as required based on the text content inside, for the last input I want to take the remaining space – Max Koretskyi Sep 18 '21 at 06:49
  • I get your inquiry now. Then give your first box style the following property ```flex: 0 0 auto;```. I updated the answer and i wish it solves your question. – Abdelrahman Hatem Sep 18 '21 at 06:52
  • so why setting `flex: 0 0 auto;` can help? – Max Koretskyi Sep 18 '21 at 07:25
  • **Flex** property is shorthand for three properties in order and they're flex-grow, flex-shrink and flex-basis, we change flex-basis which specifies the initial length of a flexible item and the third property to be auto, you can discover it more [here](https://developer.mozilla.org/en-US/docs/Web/CSS/flex) – Abdelrahman Hatem Sep 18 '21 at 07:32
  • Yeah, I know :) Well, it seems to be enough to set `flex-shrink:0` as by default it's `flex-shrink:1` to achieve what I want. Your answer prompted me to experiment, so thanks, upvoted it! I'll add my findings to the question body, maybe somebody will provide an elaborate explanation of the behavior – Max Koretskyi Sep 18 '21 at 07:35
  • 1
    Exactly , glad to help. – Abdelrahman Hatem Sep 18 '21 at 07:37