CODEWITHSUNDEEP
htmlcssflexboxcss-transforms
go4cas
go4cas

Reputation: 1191

Flexbox with rotated text

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

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

Both the header and content should fill the height of the parent container, the header should be 15px width, and the content then stretch to fill the remainder.

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

I have this so far:

.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

Upvotes: 7

Views: 16949

Answers (2)

Michael Benjamin
Michael Benjamin

Reputation: 371213

Rotate the text but not the larger container. The header has 15px width, as 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>

revised codepen

Upvotes: 10

Mohammad Usman
Mohammad Usman

Reputation: 39322

You will need to add one more wrap around rotated text. Then this newly inserted wrapper should be rotated instead of flex 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>

Necessary CSS:

.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>

Upvotes: 4

Related Questions