Question

我有一个不能具有明确高度的容器，它必须扩展到子代的高度。不论内容如何，两个孩子的身高必须相等，这是由两个孩子中较高的一个设置的。

这是我的问题的一个小提琴： https://jsfiddle.net/efrntzwx/74/

我需要蓝色部分扩展到红色容器的高度，同时保持填充物完整。

html, body, .container {
  /* height: 100%; */
}

body {
  padding-bottom: 100px;
}

.container {
  display: flex;
  width: 100%;
  border: 1px solid red;
}

.child1, .child2 {
  height: 100%;
  width: 50%;
  padding: 50px 100px;
}

.child1 {
  border: 1px solid green;
}

.child2 {
  border: 1px solid blue;
}

.child1content {
  height: 100%;
  background-color: green;
}

.child2content {
  height: 100%;
  background-color: blue;
}

<html>
  <body>
    <div class="container">
      <div class="child1">
        <div class="child1content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at tellus eget ex semper feugiat. Etiam maximus non est at egestas. Proin fermentum ipsum eget enim iaculis mattis eu non elit. Fusce fringilla neque vel mauris vulputate elementum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque sodales erat augue, a volutpat nunc ultrices quis. Cras feugiat, metus a dapibus condimentum, lorem nulla malesuada enim, et sodales arcu sapien eu sem. Proin vel vulputate magna. Integer rhoncus iaculis justo, eget dignissim massa tempus a. Nullam ut malesuada diam. Vestibulum aliquam ligula eget turpis viverra dignissim. Maecenas elementum nec erat sit amet bibendum. Nulla in hendrerit orci. Duis elit dui, iaculis quis dapibus condimentum, viverra id libero. Suspendisse potenti.

Etiam blandit scelerisque eleifend. Vestibulum non mauris erat. Mauris sed massa sodales, tristique mi ut, suscipit leo. Nam porttitor urna ac nulla malesuada, ac blandit orci bibendum. Aliquam luctus quis ante ac suscipit. Sed sed sapien vestibulum nulla venenatis sodales. Pellentesque ultricies tellus non vehicula ornare. Cras quis aliquet tellus. Mauris nec leo quis metus dignissim laoreet non a nisi. Aenean finibus nunc a augue laoreet, porttitor ullamcorper odio imperdiet. Vivamus pellentesque, leo vitae dignissim varius, elit metus faucibus justo, vel pharetra lectus erat eu lorem. Pellentesque scelerisque tortor elit, at facilisis nisi suscipit at. Nulla facilisi.
        </div>
      </div>
      <div class="child2">
        <div class="child2content">
          test
        </div>
      </div>
    </div>
  </body>
</html>

Answer 1

我为两个孩子添加了flex-1属性。这样，两个元素在每种情况下都将具有相同的宽度和高度。我更改和添加的是注释行中的规范。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    body {
      padding-bottom: 100px;
    }
    
    .container {
      display: flex;
      width: 100%;
      border: 1px solid red;
    }
    
    .child1,
    .child2 {
      padding: 50px 100px;
      /* if you want to always same height and width in the container  remove this*/
    }
    
    .child1 {
      border: 1px solid green;
      flex: 1;
      /*added*/
    }
    
    .child2 {
      border: 1px solid blue;
      flex: 1;
      /*added*/
    }
    
    .child1content {
      height: 100%;
      background-color: green;
    }
    
    .child2content {
      height: 100%;
      background-color: blue;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="child1">
      <div class="child1content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at tellus eget ex semper feugiat. Etiam maximus non est at egestas. Proin fermentum ipsum eget enim iaculis mattis eu non elit. Fusce fringilla neque vel mauris vulputate elementum. Vestibulum
        ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque sodales erat augue, a volutpat nunc ultrices quis. Cras feugiat, metus a dapibus condimentum, lorem nulla malesuada enim, et sodales arcu sapien eu sem.
        Proin vel vulputate magna. Integer rhoncus iaculis justo, eget dignissim massa tempus a. Nullam ut malesuada diam. Vestibulum aliquam ligula eget turpis viverra dignissim. Maecenas elementum nec erat sit amet bibendum. Nulla in hendrerit orci.
        Duis elit dui, iaculis quis dapibus condimentum, viverra id libero. Suspendisse potenti. Etiam blandit scelerisque eleifend. Vestibulum non mauris erat. Mauris sed massa sodales, tristique mi ut, suscipit leo. Nam porttitor urna ac nulla malesuada,
        ac blandit orci bibendum. Aliquam luctus quis ante ac suscipit. Sed sed sapien vestibulum nulla venenatis sodales. Pellentesque ultricies tellus non vehicula ornare. Cras quis aliquet tellus. Mauris nec leo quis metus dignissim laoreet non a nisi.
        Aenean finibus nunc a augue laoreet, porttitor ullamcorper odio imperdiet. Vivamus pellentesque, leo vitae dignissim varius, elit metus faucibus justo, vel pharetra lectus erat eu lorem. Pellentesque scelerisque tortor elit, at facilisis nisi
        suscipit at. Nulla facilisi.
      </div>
    </div>
    <div class="child2">
      <div class="child2content">
        test
      </div>
    </div>
  </div>
</body>

</html>

需要两个同级来扩展到父级的高度，而没有父级集合的显式高度

1 个答案: