Width ignored on flexbox items

后端 未结 8 1556
有刺的猬
有刺的猬 2021-01-30 02:42

http://jsfiddle.net/XW9Se/

I\'ve set width: 200px; on the left

but if I view it with the browser inspector tool it appears that the
相关标签:
8条回答
  • 2021-01-30 03:25

    Solved this with a flex not respecting min-width when there was not enough content to fill that width.

    Added the CSS rule box-sizing: initial; on the same flex element that had the non-working min-width declaration.

    0 讨论(0)
  • 2021-01-30 03:28

    Add display:inline-block; in left class

    0 讨论(0)
  • 2021-01-30 03:37

    My preferred way of dealing with this situation is to add:

    flex-shrink: 0;
    

    This way you may continue using width in your Flex container and you've given it specific information about how you wish this flex item to behave.

    Another option, depending on the requirement is to use min-width, which is respected when using flex.

    0 讨论(0)
  • 2021-01-30 03:37

    add display: contents on the element or div you want to maintain the width.

    0 讨论(0)
  • 2021-01-30 03:38

    Give the #left div a min-width of 200px, should do the job.

    0 讨论(0)
  • 2021-01-30 03:40

    Remove the width on .container > div and use flex: auto; on #main: fiddle

    #main {
       flex: auto; 
       background: lightblue; 
      -webkit-order: 2;
       order: 2;     
    }
    
    0 讨论(0)
提交回复
热议问题