Flexbox with rotated text

Question

I am trying to create a CSS widget component using flexbox.

The component has a title (which should have rotated text) and a content area.

Both the title and content should fill the height of the parent container, the title should be 15 pixels wide, and the content should then be stretched to fill the remainder.

So far, I get 100% content, but for some reason, the header does not fill the height of the parent container.

I still have this:

.widget { height: 200px; width: 200px; border: 1px solid #ddd; background-color: #eee; display: flex; } .widget-header { background-color: #1976D2; color: #fff; transform: rotate(-90deg); border: 1px solid red; font-size: 10px; flex: 0; height: 15px; align-self: center; text-align: center; } .widget-content { border: 1px solid blue; flex: 1; } 

 <div class="widget"> <div class="widget-header">order summary</div> <div class="widget-content"> <p>some text here</p> <p>some more text ...</p> </div> </div> 

CodePen: http://codepen.io/go4cas/pen/XpryQR

Answer 1

You will need to add another wrapper around the rotated text. Then this new inserted shell needs to be turned instead of a flexible child.

HTML:

 <div class="widget"> <div class="widget-header"> <div class="header-content"> order summary </div> </div> <div class="widget-content"> <p>some text here</p> <p>some more text ...</p> </div> </div> 

CSS required:

 .widget { position: relative; display: flex; } .widget-header { background-color: #1976D2; border: 1px solid red; text-align: center; color: #fff; width: 25px; } .header-content { transform: rotate(-90deg); transform-origin: 0 100%; position: absolute; line-height: 25px; font-size: 14px; height: 25px; width: 100%; left: 25px; bottom: 0; } 

 * {box-sizing: border-box;} .widget { height: 200px; width: 200px; border: 1px solid #ddd; background-color: #eee; position: relative; display: flex; } .widget-header { background-color: #1976D2; color: #fff; border: 1px solid red; font-size: 10px; width: 27px; text-align: center; height: 100%; } .header-content { transform: rotate(-90deg); transform-origin: 0 100%; position: absolute; line-height: 25px; font-size: 14px; z-index: 10; height: 25px; width: 100%; left: 25px; bottom: 0; } .widget-content { border: 1px solid blue; flex: 1; } 

 <div class="widget"> <div class="widget-header"> <div class="header-content"> order summary </div> </div> <div class="widget-content"> <p>some text here</p> <p>some more text ...</p> </div> </div> 

Answer 2

Rotate the text, but not a larger container. The title has a width of 15 pixels specified.

 .widget { height: 200px; width: 200px; border: 1px solid #ddd; background-color: #eee; display: flex; } .widget-header { background-color: #1976d2; flex: 0 0 15px; min-width: 0; display: flex; justify-content: center; align-items: center; } .widget-header > span { color: #fff; font-size: 10px; transform: rotate(-90deg); white-space: nowrap; } .widget-content { border: 1px solid blue; flex: 1; } 

 <div class="widget"> <div class="widget-header"> <span>order summary</span> </div> <div class="widget-content"> <p>some text here</p> <p>some more text ...</p> </div> </div> 

modified code