Question 231878 in CSS Question posted in
Some basic documentation can be found here.

Css – How to make two horizontal flex containers, with input box, responsive

I have two flex containers in a row, one with flex-start, the other with flex-end, and both containers are in one wrapping div set to flex.

With 100% width set on each one, they both stick to the end of the row (start and end).
However, when I minimize the width of the window, the text on the right starts to disappear:

enter image description here

Only when the input box meets the edge of the window does it start to shrink:
enter image description here

I understand that text cannot shrink, but is it possible that when the text on the right meets the window edge, then the input box will start shrinking?

Stackblitz link:
https://stackblitz-starters-u2rhvf.stackblitz.io

Code:

export default function App() {
  return (
    <div style={{ display: 'flex' }}>
      <div
        style={{ display: 'flex', justifyContent: 'flex-start', width: '100%' }}
      >
        <h1>Hello StackBlitz!</h1>
      </div>
      <div
        style={{ display: 'flex', justifyContent: 'flex-end', width: '100%' }}
      >
        <Select data={[]} style={{ width: '20rem' }} />
        <h1>Hello StackBlitz!</h1>
      </div>
    </div>
  );
}
Tags:

2

Answers


  1. 0

    You could play around with max/min-width settings here to see what suits your application. This may be what you need:

    export default function App() {
  return (
    <div style={{ display: 'flex' }}>
      <div
        style={{ display: 'flex', justifyContent: 'flex-start', width: '100%' }}
      >
        <h1>Hello StackBlitz!</h1>
      </div>
      <div
        style={{ display: 'flex', justifyContent: 'flex-end', width: '100%' }}
      >
        <Select data={[]} style={{ maxWidth: '20rem', minWidth: '2rem', width: '100%' }} />
        <h1>Hello StackBlitz!</h1>
      </div>
    </div>
  );
}
    Login or Signup to reply.
  2. 0

    Why this happens?
    Because you have set a static width to the input and that’s why it doesn’t change its width by resizing the width of the viewport, but what is the solution?
    Well you need to set it dynamically with percentages and you can do this in two ways:

    1. You can just set the width of the input to a percentage from the beginning like this:
    width: 100%;
    1. The second way is to set the width of the in a media query in which the edge of the viewport reaches the text like this (Let’s think that the div which the input box is in is called "input"):
    @media (max-width: 44em) {
   .input {
      width: 100%; 
   }
}

    By setting the width of the input dynamically there shouldn’t be a problem anymore but there is something that you might say about this:
    When I do set it dynamically, the input’s width is not as long as I want
    Well, the solution to this is also the same as above:
    The only thing you need to do is to set the width of the right container dynamically too!
    For example, you can set the width of the right container to 60% and that means that the right container will fill 60% of the width of the parent flex container and who do you think will fill the space? Of course! The input.

    I hope this was helpful and everything is clear

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search