¿Cómo puedo tener un div de ancho fijo dentro de un div de ancho variable sin desbordamiento?

I have a "wrapper" div, of let's say a width of 80%, around a div where I want to limit the width (a form for example) to 300px. When the controls are set to "fill" the width the controls overlap the "wrapper" div. I obviously find this ugly. I know I can set the overflow attribute to just add scrollbars, but what I'd really like to do is prevent the "wrapper" div from narrowing smaller than its content.

preguntado el 27 de noviembre de 13 a las 04:11

2 Respuestas

Give the wrapper a min-width of 300px along after the width 80%

respondido 27 nov., 13:04

Sounds like you need to set a min-width on your wrapper container. Here is a simple example:

HTML:

<div class="wrapper">
    <form>
        <input type="text">
        <input type="text">
            <button type="submit">Save</button>
    </form>
</div>

CSS:

.wrapper {
    width: 80%;
    min-width: 300px; /*This should be at least as wide as your form, wider if you need extra room */
    position: relative;
}

form {
    width: 300px;
}

input {
    width: 100%;
}

I've set up a simple jsfiddle to demonstrate: http://jsfiddle.net/MhxVz/

respondido 27 nov., 13:05

Is this "really" how designers are doing this in the wild? Seems really odd that I'd have to plan a style template around what my content may or may not be. Why is it that the parent needs to be given a hint as to the size of its contents anyway? - crujiente

The parent needs to be given a hint as to the size of the contents since your parent has a variable width, whereas your form is a fixed width. This is more necessary when you're considering how things will scale for mobile, for example. If that's not your situation, perhaps you could expand a bit more. You don't have to plan your template around this, it's just giving the parent a min-width. - Sarahholden

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.