En un contenedor principal tengo dos div, en el cuál trato que ambos elementos sean adaptables a la pantalla. Hasta ahora solo el último div se adapta, pero el primero no lo hace.
He intentado ponerle flex al contenedor principal, para que los div hijos se puedan adaptar, pero hasta ahora obtengo el mismo resultado.
Gracias de antemano.
Acá dejo mi código:
* {
margin: 0;
padding: 0;
}
#principal {
background: skyblue;
/*display: flex;
flex-direction: column;*/
}
#principal #contenedor-1 .column ul {
list-style: none;
}
#principal #contenedor-1 {
border: 1px solid navy;
width: 800px;
margin: 0 auto;
display: flex;
justify-content: space-evenly;
}
#principal #contenedor-2 {
background: skyblue;
display: flex;
justify-content: center;
}
#principal #contenedor-2 div {
border: 2px solid navy;
width: 800px;
}
<div id="principal">
<div id="contenedor-1">
<div class="column">
<span>Título 1</span>
<ul>
<li>Item 1 Item 1</li>
<li>Item 1 Item 1</li>
<li>Item 1 Item 1</li>
<li>Item 1 Item 1</li>
<li>Item 1 Item 1</li>
</ul>
</div>
<div class="column">
<span>Título 2</span>
<ul>
<li>Item 2 Item 2</li>
<li>Item 2 Item 2</li>
<li>Item 2 Item 2</li>
<li>Item 2 Item 2</li>
<li>Item 2 Item 2</li>
</ul>
</div>
<div class="column">
<span>Título 3</span>
<ul>
<li>Item 3 Item 3</li>
<li>Item 3 Item 3</li>
<li>Item 3 Item 3</li>
<li>Item 3 Item 3</li>
<li>Item 3 Item 3</li>
</ul>
</div>
</div>
<div id="contenedor-2">
<div>
<p>Texto Texto Texto Texto Texto Texto Texto</p>
</div>
</div>
</div>
max-width: 800px;
te recomiendo que uses bootstrap en estos casos para hacer estas cosas mas rápido y también tener todo mas optimizado, te dejo este enlace si te interesa aplicarlo, saludos y suerte!max-width
se adapta al ancho cuándo se reduce la pantalla, ya que no se supone que elmax-width
solo sirve para indicar el tamaño máximo del elemento?.