Question 400861 in Html Question posted in
Some basic documentation can be found here.

Html – Why doesn't this component fill the entire width?

I am confused why the first button doesn’t fill the whole width here:

<div style="display:flex;">
  <button style="width:100%;"> </button>
  <button style="flex-shrink: 0;"> </button>
  <button> </button>
</div>

Why does flexbox interrupt the width?

Tags:

3

Answers


  1. 0

    the first button doesn’t fill the whole width because of how flexbox distributes space. By default, flex items have flex-shrink: 1, allowing them to shrink. When you set width: 100% on the first button, it initially takes up all space, but then flexbox redistributes the space to accommodate the other buttons.

    Login or Signup to reply.
  2. 0

    It fills the entire width available to it by its flex container, which has to leave room for the remaining items in the container.

    If you’re expecting the items to wrap, the default value for flex-wrap when not specified is nowrap. You can set a custom value to allow the items to wrap:

    <div style="display:flex;flex-wrap:wrap;">
  <button style="width:100%;"> </button>
  <button style="flex-shrink: 0;"> </button>
  <button> </button>
</div>
    Login or Signup to reply.
  3. 0

    It does. As reflected in your code snippet.

    <div style="display:flex; height: 50px;">
  <button style="width:100%;"> </button>
  <button style="flex-shrink: 0;"> </button>
  <button> </button>
</div>

    However, if you’re expecting the two sibling buttons to shrink to zero, then you have to remove the default padding and borders on button elements.

    enter image description here

    <div style="display:flex; height: 50px">
  <button style="width:100%;"> </button>
  <button style="padding: 0; border: 0;"> </button>
  <button style="padding: 0; border: 0;"> </button>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search