контейнер flexbox не растягивается на 100% высоты - PullRequest
Новая
       20

контейнер flexbox не растягивается на 100% высоты

0 голосов
/ 04 мая 2018

У меня есть следующие HTML и CSS:
HTML: 

<body style="height:100%;">
  <div class="fb-container">
    <div class"somedatadiv">
      Some data
    </div>
    <div class="anotherdiv">
      data
    </div>
  </div>
</body>

CSS: 

.fb-container { 
  display: flex;
  flex-wrap: no-wrap;
  align-items: stretch;
  // min-height: 100%;
}
.somedatadiv {
  width: 75%;
  max-width: 345px;
  backround: grey;
  padding: 30px;
}

по какой-то причине div гибкого контейнера не растягивается на 100% высоты тела.



(браузер, который я использую, является chrome для этой "демонстрации / приложения / сайта")

Ответы [ 3 ]

0 голосов
/ 04 мая 2018

добавь это и должно работать. Демо: https://jsfiddle.net/jacobgoh101/svtewj9j/

html,
body {
  height: 100%;
}

body {
  display: flex;
}

обновление : если вы хотите, чтобы fb-контейнер оставался полной ширины

добавить flex: 1 1 100%; к этому 

.fb-container {
  flex: 1 1 100%;
}

обновление : полное решение https://jsfiddle.net/jacobgoh101/svtewj9j/2/

html,
body {
  height: 100%;
}

body {
  display: flex;
}

.fb-container {
  display: flex;
  flex-wrap: no-wrap;
  align-items: stretch;
  flex: 1 1 100%;
}

.somedatadiv {
  flex: 1 1 75%;
  max-width: 345px;
  backround: grey;
  padding: 30px;
  box-sizing: border-box;
}
0 голосов
/ 04 мая 2018

В шаблоне MCV был допущен некоторый код. это испортило стиль / макет. Это сообщение не относится к другим пользователям, поэтому оно будет удалено / удалено

обновление: не могу удалить это сообщение:

0 голосов
/ 04 мая 2018

Необходимо добавить display:flex к родительскому тегу для, а затем flex:1 к дочернему элементу, чтобы позволить дочернему элементу расшириться до 100% от родительского. 

.fb-container { 
  background-color:green;
  flex: 1;
  
}
.somedatadiv {
  width: 75%;
  max-width: 345px;
  background-color: grey;
  padding: 30px;
}
<body style="height:100vh;display:flex;">
  <div class="fb-container">
    <div class="somedatadiv">
      Some data
    </div>
    <div class="anotherdiv">
      data
    </div>
  </div>
</body>
...