Set div to have its siblings width

后端 未结 8 1552
猫巷女王i
猫巷女王i 2020-12-05 09:34

I\'m looking for a CSS solution to the following:-

8条回答
  •  盖世英雄少女心
    2020-12-05 10:17

    Here's another Flexbox solution which allows for the second child to wrap to match the width of the variable height sibling.

    .wrapper > div {
      border: 1px solid;
    }
    
    .child {
      display: flex;
    }
    
    .child div {
      flex-grow: 1;
      width: 0;
    }
    
    .wrapper {
      display: inline-block;
    }
    This div is dynamically sized based on its content
    This div will always be the same width as the preceding div, even if its content is longer (or shorter too).

    Edit:

    To support multiple divs under .child, where each div is on its own line, add break-after: always; ...

    .child div {
      flex-grow: 1;
      width: 0;
      break-after: always;
    }
    

提交回复
热议问题