Enlarge 100% box using display: flex

Question

Enlarge 100% box using display: flex

Navigation

#1 by (2 votes)
#2 by (1 votes)

4

I am using the property display:flex but having this structure:

<div class="cajaFlexible">
<div class="cajaHija"></div>
<div class="cajaHija"></div>
</div>

And with this css:

.cajaFlexible{display:flex;flex-direction:column;}
.cajaHija{flex:0 1 auto;}
.cajaHija{flex:0 1 auto;}

I can not get the daughter boxes to occupy 100% of the width of the div and I do not know why, I have tried several values (flex 0 1 100%, and some more that I do not remember) and I never have 100% of the div.

What property / value is missing me?

Sample Code:

<footer class="pie">
  <section class="contenedor">
    <article class="pie-flex">
      <div class="pie-izquierda">
        <figure class="logo-inferior">
          <img src="<?php bloginfo('template_url');?>/imagenes/logo-gris.png"/>
        </figure>
        <div class="contacto">
          <p>Aqui van datos de contacto</p>
        </div>
      </div>
      <div class="pie-derecha">
        <nav class="menu-inferior">
          <p>dato de menu</p>
        </nav>
      </div>
    </article>
  </section>
</footer>

CSS for this structure:

.pie-flex {
    height: auto;
    min-height: 250px;
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    justify-content: flex-start;
    -webkit-justify-content: flex-start;
    -moz-justify-content: flex-start;
    -ms-justify-content: flex-start;
    -o-justify-content: flex-start;
    align-items: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    color: #9d9d9d;
}

    .pie-izquierda {
        flex: 0 1 75%;
        -webkit-flex: 0 1 75%;
        -moz-flex: 0 1 75%;
        -ms-flex: 0 1 75%;
        -o-flex: 0 1 75%;
    text-align: left;
        display: flex;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        align-items: center;
        -webkit-align-items: center;
        -moz-align-items: center;
        -ms-align-items: center;
        -o-align-items: center;
        justify-content: flex-start;
        -webkit-justify-content: flex-start;
        -moz-justify-content: flex-start;
        -ms-justify-content: flex-start;
        -o-justify-content: flex-start;
    }
    .pie-derecha{
        flex: 0 1 25%;
        -webkit-flex: 0 1 25%;
        -moz-flex: 0 1 25%;
        -ms-flex: 0 1 25%;
        -o-flex: 0 1 25%;
    }

css3 css flexbox

asked by Marcos 20.07.2017 в 11:10

source

2 answers

Filter data when loading CSV using Pandas in Python 3.x Avoid unnecessary copies

score 2 · Answer 1

The problem you are having is that you need to add a size to the container div, otherwise your children do not know how much they should occupy.

Example:

.cajaFlexible{
  display:flex;
  width: 500px; 
  height: 500px;
  flex-direction: column;
}
.cajaHija1{flex: 1 1 auto; background-color: red;}
.cajaHija2{flex: 1 1 auto; background-color: blue}

<div class="cajaFlexible">
  <div class="cajaHija1"></div>
  <div class="cajaHija2"></div>
</div>

score 1 · Answer 2

From what you say in the comments I understand that you have something like that (two div in vertical that have the width of its content instead of 100%):

.pie-flex {
  height: auto;
  min-height: 250px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  color: #9d9d9d;
  flex-direction: column;
}

.pie-izquierda {
  flex: 0 1 100%;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border: solid 1px red;
}

.pie-derecha {
  flex: 0 1 100%;
  border: solid 1px blue;
}

<footer class="pie">
  <section class="contenedor">
    <article class="pie-flex">
      <div class="pie-izquierda">
        <figure class="logo-inferior">
          <img src="<?php bloginfo('template_url');?>/imagenes/logo-gris.png" />
        </figure>
        <div class="contacto">
          <p>Aqui van datos de contacto</p>
        </div>
      </div>
      <div class="pie-derecha">
        <nav class="menu-inferior">
          <p>dato de menu</p>
        </nav>
      </div>
    </article>
  </section>
</footer>

To solve this you should eliminate align-items: center of .pie-flex or better yet overwrite it because it is possible that if you are modifying the elements with media queries you inherit it. Change the value to strecht so that it stretches the entire available width:

.pie-flex {
  height: auto;
  min-height: 250px;
  display: flex;
  justify-content: flex-start;
  align-items: strecht;
  color: #9d9d9d;
  flex-direction: column;
}

.pie-izquierda {
  flex: 0 1 75%;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border: solid 1px red;
}

.pie-derecha {
  flex: 0 1 25%;
  border: solid 1px blue;
}

<footer class="pie">
  <section class="contenedor">
    <article class="pie-flex">
      <div class="pie-izquierda">
        <figure class="logo-inferior">
          <img src="<?php bloginfo('template_url');?>/imagenes/logo-gris.png" />
        </figure>
        <div class="contacto">
          <p>Aqui van datos de contacto</p>
        </div>
      </div>
      <div class="pie-derecha">
        <nav class="menu-inferior">
          <p>dato de menu</p>
        </nav>
      </div>
    </article>
  </section>
</footer>