Dwa 50% elementów div z białymi znakami: elementy nowrap wewnątrz kontenera elastycznego

Question

Chcę mieć element nadrzędny, który zawiera dwa elementy div o szerokości 50%, które zmieniają rozmiar wraz z zawartością.

Jeden z nich ma h3 z , co powoduje, że element div rośnie o 50%.

Mogę zmusić element div, aby powrócił do szerokości 50% przy użyciu min-width:0;, ale teraz przepełnienie wynosi h3.

Więc albo dostaję inną szerokość na div dzieci lub przelew z h3 wewnątrz jednego z nich.

Czy można sprawić, aby miały taką samą szerokość 50%, nawet jeśli zawierają elementy o numerze white-space:nowrap;?

Sprawdź tutaj problemu: http://codepen.io/anon/pen/VjPwLm?editors=1100

#parent { 
 
    background: whitesmoke; 
 
    display: inline-flex; 
 
} 
 
#left { 
 
    background: rgba(10, 200, 250, 0.5); 
 
    flex-basis: 0; 
 
    flex-grow: 1; 
 
} 
 
#right { 
 
    background: rgba(250, 200, 10, 0.5); 
 
    flex-basis: 0; 
 
    flex-grow: 1; 
 
    /*min-width:0;*/ 
 
    /* Turn this on to see the h3 overflow */ 
 
} 
 
h3 { 
 
    white-space: nowrap; 
 
}

<div id="parent"> 
 
    <div id="left">Captain Deadpool</div> 
 
    <div id="right"> 
 
    <h3>Very long title that does not entirelly fit into the div</h3> 
 
    </div> 
 
</div>

Answer 1

Jeśli dobrze rozumiem, chcesz lewo pozycja Flex być tak szeroki jak długi tytuł.

Następnie można:

• Zastosowanie min-width: 100% zarówno giętkie przedmioty, aby je tak szeroka jak konkatenacji swoich tekstach. Wtedy będą równie szerokie.

• Są one jednak zbyt szerokie, ponieważ zawierają tekst pierwszego elementu flex. Użyj width: 0, aby go zignorować.

#parent { 
 
    background: whitesmoke; 
 
    display: inline-flex; 
 
} 
 
#left, #right { 
 
    min-width: 100%; 
 
} 
 
#left { 
 
    background: rgba(10,200,250,0.5); 
 
    width: 0; 
 
} 
 
#right { 
 
    background: rgba(250,200,10,0.5); 
 
    white-space: nowrap; 
 
}

<div id="parent"> 
 
    <div id="left">Captain Deadpool</div> 
 
    <div id="right"><h3>Very long title that does not entirelly fit into the div</h3></div> 
 
</div>

Answer 2

Jeśli rozumiem problemu poprawnie, chcesz maintian z 2 DIV tak, że mają 50% szerokości. Ustaw div jednostki nadrzędnej na szerokość 100%, a następnie ustaw wartość #right i #left na min-width: 50%; Dodaj do h3, aby przepełnienie zostało ukryte.

#parent { 
 
    background: whitesmoke; 
 
    display: inline-flex; 
 
} 
 
#left { 
 
    background: rgba(10, 200, 250, 0.5); 
 
    flex-basis: 0; 
 
    flex-grow: 1; 
 
    min-width: 100%; 
 
} 
 
#right { 
 
    background: rgba(250, 200, 10, 0.5); 
 
    flex-basis: 0; 
 
    flex-grow: 1; 
 
    min-width: 100%; 
 
} 
 
h3 { 
 
    white-space: nowrap; 
 
}

<div id="parent"> 
 
    <div id="left">Captain Deadpool</div> 
 
    <div id="right"> 
 
    <h3>Very long title that does not entirelly fit into the div</h3> 
 
    </div> 
 
</div>