Как остановить переполнение элемента Flex за пределами родительского элемента, если высота равна 100% - PullRequest
Новая
       0

Как остановить переполнение элемента Flex за пределами родительского элемента, если высота равна 100%

0 голосов
/ 24 марта 2020

Если вы посмотрите на фрагмент кода, я пытаюсь увеличить #feature_header_container (красным), чтобы заполнить оставшуюся высоту, оставшуюся в header, но из-за того, что внутри header есть другой контент, такой как <p> показано, когда я устанавливаю height: 100% на #feature_header_container, он выходит за пределы header, но я хочу, чтобы он только увеличил оставшуюся высоту header, как я могу это сделать?

Прямо сейчас, #feature_header_container (красным) выходит за пределы header и выталкивается первым <p> элементом внутри header. 

*
{
	font-family: Arial;
	box-sizing: border-box;
}

html, body
{
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
}

header
{
	display: block;
	height: 100%;
	min-height: 100vh;
	background-color: #21D4FD;
	background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);

	-webkit-box-shadow: 0px 10px 14px -6px rgba(0,0,0,0.57); 
	box-shadow: 0px 10px 14px -6px rgba(0,0,0,0.57);

	border-radius:  0 0 80px 80px;

	padding-left: 10%;
	padding-right: 10%;
}

#p_test
{
  display: inline-block;
}

#feature_header_container {
  display: flex;
  height: 100%;
	margin-top: 20px;
  background-color: red;
  align-items: center;
}

#feature_container {
  display: inline-flex;
  flex-grow: 1;
  justify-content: center;
  background-color: blue;
  color: white;
}

.feature_box {
  background-color: pink;
}
<html>

  <body>

    <header>
    
    <p id="p_test">
    Test Test Test
    </p>

      <div id="feature_header_container">

        <div id="feature_container">

          <div class="feature_box">
            <p>Test</p>
          </div>

          <div class="feature_box">
            <p>Test</p>
          </div>

          <div class="feature_box">
            <p>Test</p>
          </div>

        </div>

      </div>

    </header>
    
    <main>
      <p>TesttestTesttestTesttestTesttestTesttest</p>
    </main>

  </body>

</html>

1 Ответ

0 голосов
/ 24 марта 2020

Спасибо, что натолкнулись на эту скрипку: https://jsfiddle.net/MadLittleMods/LmYay/

Мне удалось решить мою проблему, и у меня есть рабочий пример: https://jsfiddle.net/p459qvfk/2/

Рабочий пример скопирован: 

* {
  font-family: Arial;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

header {
  display: flex;
  flex-direction: column;

  justify-content: flex-start;
  /* align items in Main Axis */
  align-items: stretch;
  /* align items in Cross Axis */
  align-content: stretch;
  /* Extra space in Cross Axis */
  min-height: 100vh;
  background-color: #21D4FD;
  background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);

  -webkit-box-shadow: 0px 10px 14px -6px rgba(0, 0, 0, 0.57);
  box-shadow: 0px 10px 14px -6px rgba(0, 0, 0, 0.57);

  border-radius: 0 0 80px 80px;

  padding-left: 10%;
  padding-right: 10%;
}

#p_test {
  display: inline-block;
}

#feature_header_container {
  display: flex;
  flex: 1;
  background-color: red;
  align-items: center;
}

#feature_container {
  display: inline-flex;
  flex: 1;
  justify-content: center;
  background-color: blue;
  color: white;
}

.feature_box {
  background-color: pink;
}
<html>

  <body>

    <header>

      <p id="p_test">
        Test Test Test
      </p>

      <p id="p_test">
        Test Test Test
      </p>

      <div id="feature_header_container">

        <div id="feature_container">

          <div class="feature_box">
            <p>Test</p>
          </div>

          <div class="feature_box">
            <p>Test</p>
          </div>

          <div class="feature_box">
            <p>Test</p>
          </div>

        </div>

      </div>

    </header>

    <main>
      <p>TesttestTesttestTesttestTesttestTesttest</p>
    </main>

  </body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...